Nginx跨域问题解决

运维老司机

已于 2024-08-30 11:35:43 修改

阅读量245

点赞数 1

分类专栏： Linux Nginx FAQ记录文章标签： linux nginx

于 2024-08-30 11:34:52 首次发布

本文链接：https://blog.csdn.net/weixin_45697805/article/details/141713688

版权

FAQ记录同时被 3 个专栏收录

23 篇文章 3 订阅

订阅专栏

Linux

15 篇文章 0 订阅

订阅专栏

Nginx

2 篇文章 0 订阅

订阅专栏

背景：云服务器上面部署了后端和前端，前端开发在本地启一个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配置
原有配置

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

新增配置

        # 允许跨域请求的配置
        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;
        }

#新增标红的这些内容，*号代表允许所有
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;：
#这个配置指定了允许的请求头。类似地，'*' 表示允许所有的请求头。这将允许浏览器在跨域请求中发送任何类型的请求头信息。

增加之后的配置

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