nginx 解决跨域问题 No: 'Access-Control-Allow-Origin' header is present on the requested resource

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了nginx 解决跨域问题 No: 'Access-Control-Allow-Origin' header is present on the requested resource，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3021字，纯文字阅读大概需要5分钟。

内容图文

错误信息：

1，

2，

Provisional headers are shown
Access-Control-Request-Headers: token
Access-Control-Request-Method: POST
Origin: http://127.0.0.1:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

3，Failed to load http://xxx.com/jquery/upload: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:63342' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

 

解决办法：

1，如果前端没有POST或GET请求，配置如下

location /jquery/upload {

　　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 *;
　　　　add_header Access-Control-Allow-Credentials 'true';
　　　　return 200;
　　}

 

2，如何前端那边是post请求，还有header参数，此时需要在if判断中加入post

location /jquery/upload {

            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 *;
        　　　　 add_header Access-Control-Allow-Credentials 'true'; 
                return 200;
            }

            if ($request_method = 'POST') {
                add_header Access-Control-Allow-Origin *;
        　　　　 add_header Access-Control-Allow-Credentials 'true'; 
                add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                add_header Access-Control-Allow-Headers *;
            }


        　　 proxy_pass http://192.168.99.67:8089/jquery/upload;
            proxy_set_header X-real-ip $remote_addr;

        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
   }

3，关于 add_header 'Access-Control-Allow-Headers' 这条的配置

网上大部分配置：

add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
但测试多测仍失败，最后只好改为：

add_header Access-Control-Allow-Headers *;

4，另一参考版本：

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,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
    }

if ($request_method = 'POST') {
    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';
    }

if ($request_method = 'GET') {
    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';
    }

 

5，测试成功信息

 

内容总结

以上是互联网集市为您收集整理的nginx 解决跨域问题 No: 'Access-Control-Allow-Origin' header is present on the requested resource全部内容，希望文章能够帮你解决nginx 解决跨域问题 No: 'Access-Control-Allow-Origin' header is present on the requested resource所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---