nginx跨域的问题3

Question

              location / {
            #allow  GET HEAD POST;
            #methods GET HEAD POST;

            #if ($request_method !~ ^(GET|POST|PUT|DELETE)$) {
            #   return 405;
            #}


            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            location ^~/api {
                proxy_pass http://127.0.0.1:8022/api;
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                if ($request_method = 'OPTIONS') {
                    add_header 'Access-Control-Allow-Origin' '*';
                    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                    add_header 'Access-Control-Max-Age' 1728000;
                    add_header 'Content-Type' 'text/plain; charset=utf-8';
                    add_header 'Content-Length' 0;
                    return 204;
                }
                }

这里定义了location ^~/api, 运行网页，错误提示：

c.html:1 Access to XMLHttpRequest at 'http://127.0.0.1/api/user' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
c.html:63 Error: undefined
error @ c.html:63
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
l @ jquery-3.6.0.min.js:2
(anonymous) @ jquery-3.6.0.min.js:2
error (async)
send @ jquery-3.6.0.min.js:2
ajax @ jquery-3.6.0.min.js:2
(anonymous) @ c.html:54
dispatch @ jquery-3.6.0.min.js:2
v.handle @ jquery-3.6.0.min.js:2
jquery-3.6.0.min.js:2          POST http://127.0.0.1/api/user net::ERR_FAILED 500

这个怎么办?

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

问题概括

这个问题的目的是解决在使用Nginx服务器时遇到的跨域资源共享（CORS）问题。当一个网页尝试从不同的源（域名、协议或端口）请求资源时，浏览器的同源策略会阻止这种请求。为了允许跨域请求，需要在服务器上配置CORS策略。

问题出现原因

1. CORS配置错误：在Nginx的配置中，add_header指令被重复使用，可能导致了冲突或覆盖。
2. 请求路径不匹配：请求的路径http://127.0.0.1/api/user与Nginx配置中的location ^~/api不完全匹配，因为缺少了具体的资源路径（如/user）。
3. OPTIONS请求处理：虽然配置了对OPTIONS请求的处理，但可能存在其他问题导致OPTIONS请求未能正确响应。

问题解决方案

1. 确保CORS配置正确：避免在不同location块中重复设置相同的CORS头，这可能会导致冲突。
2. 精确匹配请求路径：修改Nginx配置，确保location块能够精确匹配请求的路径。
3. 正确处理OPTIONS请求：确保OPTIONS请求能够返回正确的预检响应。

提供代码

以下是修改后的Nginx配置示例：

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}

location /api {
    proxy_pass http://127.0.0.1:8022;
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

代码运行方式

1. 将上述代码保存到Nginx的配置文件中（通常是/etc/nginx/nginx.conf或/etc/nginx/sites-available/default）。
2. 重载Nginx配置以应用更改：sudo nginx -s reload。

代码预期运行结果

• 当浏览器发起跨域请求时，Nginx服务器将返回包含适当CORS头的响应。
• OPTIONS预检请求将得到处理，并返回204状态码，允许实际的GET或POST请求继续执行。

推荐相关链接

• MDN Web Docs - CORS
• nginx.org - ngx_http_core_module

请注意，修改服务器配置后，需要重新加载或重启Nginx服务以使更改生效。此外，确保在生产环境中使用CORS策略时考虑到安全性，* 通配符允许任何源访问资源，这可能会带来安全风险。