nginx 跨域问题

一、什么是跨域？

        当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

二、为什么会出现跨域？

       出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

三、一般出现跨域时的报错信息

        我遇到的情况：访问页面，点击登录按钮后，浏览器发出了请求方式为OPTIONS

         点浏览器的Console控制台，发现报跨域的错。请求后端1504 端口被拒绝。

         解决跨域问题方式有很多种，我是在nginx代理层处理。在后端接口配置文件中(即1504端口配置文件)，加上以下配置，转发时添加头部信息，Access-Control-Allow-Origin 等。

    location ~ \.php/?.*$ {
        add_header "Access-Control-Allow-Origin" $http_origin always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'OPTIONS, POST, GET' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;

        try_files $uri /index.php =404;
        fastcgi_pass  unix:/tmp/php-cgi.sock;
        fastcgi_index  index.php;
        fastcgi_param   SCRIPT_FILENAME   $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
 

        但是加上后，发现还是有报错：has been blocked by CORS policy: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response. 已被cors策略阻止：Access-Control-Allow-Headers 在响应中不允许请求标头字段Authorization。

         那么咱们就在上面的nginx配置文件中把Authorization 加上。再次重载nginx配置文件即可。

add_header 'Access-Control-Allow-Headers' 'Authorization,Origin, X-Requested-With, Content-Type, Accept' always;

四、重复跨域

        不知道大家有没有遇到过重复跨域，就是在别的地方配置了跨域如网关，或php代码里，然后你在nginx上又配了一次，导致访问报错 has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values;

        我这边就是把nginx上允许跨域的几行注释了，就好了。因为不知道在哪还配置了别的跨域。