Nginx跨域问题解决

  • 背景:云服务器上面部署了后端和前端,前端开发在本地启一个web访问页面,然后访问云服务的后端,然后出现问题

  • 问题:Access to XMLHttpRequest at 'http://192.168.10.100:8070/auth/login' from origin 'http://localhost:9090' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  • 解决方法:查了一下说是跨域的问题 修改nginx配置

  • 原有配置

bash 复制代码
server {
    listen 6606;
    server_name maintain;
    location / {
        root /opt/lumiankexue/web/bridge/dist;
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
    }
    location /prod-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.0.44:8070/;
        client_max_body_size 200M;
        client_body_buffer_size 200M;
    }
    # 禁止访问/actuator路径
    if ($request_uri ~ "/actuator") {
        return 403;
    }
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
}
  • 新增配置
bash 复制代码
        # 允许跨域请求的配置
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' '*' always;
        add_header 'Access-Control-Allow-Headers' '*' always;
        # 处理预检请求(OPTIONS方法)
        if ($request_method = 'OPTIONS') {
            return 204;
        }
bash 复制代码
#新增标红的这些内容,*号代表允许所有
1. add_header 'Access-Control-Allow-Origin' '*' always;:
#这个配置指定了允许访问资源的域。在这种情况下,'*' 表示允许所有域名访问资源,这意味着任何网站都可以访问您的资源。这可能会存在安全风险,因为允许所有域名访问资源可能会导致跨站请求伪造(CSRF)攻击等安全问题。
2. add_header 'Access-Control-Allow-Methods' '*' always;:
#这个配置指定了允许的请求方法。与上面提到的配置不同,'*' 在这里指示允许所有的请求方法。这将允许发起任何类型的请求(GET、POST、PUT、DELETE 等)来访问资源。
3. add_header 'Access-Control-Allow-Headers' '*' always;:
#这个配置指定了允许的请求头。类似地,'*' 表示允许所有的请求头。这将允许浏览器在跨域请求中发送任何类型的请求头信息。
  • 增加之后的配置
bash 复制代码
server {
    listen 6606;
    server_name maintain;
    location / {
        root /opt/lumiankexue/web/bridge/dist;
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
    }
    location /prod-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 允许跨域请求的配置
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' '*' always;
        add_header 'Access-Control-Allow-Headers' '*' always;
        # 处理预检请求(OPTIONS方法)
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass http://192.168.0.44:8070/;
        client_max_body_size 200M;
        client_body_buffer_size 200M;
    }
    # 禁止访问/actuator路径
    if ($request_uri ~ "/actuator") {
        return 403;
    }
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
}

然后问题解决

相关推荐
xujiangyan_14 分钟前
nginx的反向代理和负载均衡
服务器·网络·nginx
GalaxyPokemon42 分钟前
Muduo网络库实现 [十] - EventLoopThreadPool模块
linux·服务器·网络·c++
自由鬼1 小时前
开源虚拟化管理平台Proxmox VE部署超融合
linux·运维·服务器·开源·虚拟化·pve
瞌睡不来1 小时前
(学习总结32)Linux 基础 IO
linux·学习·io
inquisiter1 小时前
UEFI镜像结构布局
linux·spring
Linux运维老纪2 小时前
运维之 Centos7 防火墙(CentOS 7 Firewall for Operations and Maintenance)
linux·安全·centos·云计算·运维开发·火绒
斯普信专业组2 小时前
Ceph异地数据同步之-RBD异地同步复制(下)
linux·服务器·ceph
counsellor2 小时前
CentOS 7安装hyperscan
linux·centos·hyperscan
电星托马斯2 小时前
Linux系统CentOS 6.3安装图文详解
linux·运维·服务器·程序人生·centos
啞謎专家2 小时前
CentOS中挂载新盘LVM指南:轻松扩展存储空间,解决磁盘容量不足问题
linux·运维·服务器