当前位置： 首页>前端>正文

nginx修改进程 nginx changeorigin

前端2024-05-25 18:06:59

一、什么是跨域？

        当一个请求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

nginx修改进程 nginx changeorigin,nginx修改进程 nginx changeorigin_nginx修改进程,第1张

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

nginx修改进程 nginx changeorigin,nginx修改进程 nginx changeorigin_同源策略_02,第2张

         解决跨域问题方式有很多种，我是在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修改进程 nginx changeorigin,nginx修改进程 nginx changeorigin_nginx修改进程_03,第3张

Authorization 加上。再次重载nginx配置文件即可。

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

四、重复跨域

has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values;

nginx修改进程 nginx changeorigin,nginx修改进程 nginx changeorigin_Access_04,第4张

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


https://www.xamrdz.com/web/28g1962103.html

相关文章：