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;
    }
}

然后问题解决

相关推荐
程序猿(雷霆之王)6 小时前
Linux——进程间通信
linux·运维·服务器
java1234_小锋7 小时前
什么是WebSocket?NGINX如何支持WebSocket协议?
websocket·网络协议·nginx
riveting7 小时前
SD2351核心板:重构AI视觉产业价值链的“超级节点”
大数据·linux·图像处理·人工智能·重构·智能硬件
易保山8 小时前
MIT6.S081 - Lab10 mmap(文件&内存映射)
linux·操作系统·c
禅与Bug的修复艺术8 小时前
JAVA后端开发常用的LINUX命令总结
java·linux·面试·java面试·后端开发·java后端·面试经验
Hello.Reader9 小时前
基于 Nginx 的 WebSocket 反向代理实践
运维·websocket·nginx
北冥有鱼被烹9 小时前
【微知】/proc中如何查看Linux内核是否允许加载内核模块?(/proc/sys/kernel/modules_disabled)
linux·服务器
qq_2739002310 小时前
CentOS系统防火墙服务介绍
linux·运维·centos
小余吃大鱼10 小时前
CentOS中在线安装Docker(超详细)
linux·docker·centos
程序员JerrySUN10 小时前
驱动开发硬核特训 · Day 19:字符设备驱动实战(控制 LED)
linux·驱动开发