[转] nginx 配置站点跨域

Posted chenjianwen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[转] nginx 配置站点跨域相关的知识,希望对你有一定的参考价值。

 No \'Access-Control-Allow-Origin\' header is present on the requested resource

1.跨域指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器对javascript 施加的安全限制。

2.浏览器在执行脚本的时候,都会检查这个脚本属于哪个页面,即检查是否同源,只有同源的脚本才会被执行;而非同源的脚本在请求数据的时候,浏览器会报一个异常,提示拒绝访问。

  ①、http://www.123.com/index.html 调用  http://www.123.com/welcome.jsp      协议、域名、端口号都相同,同源。

  ②、https://www.123.com/index.html 调用 http://www.123.com/welcome.jsp      协议不同,非同源。

  ③、http://www.123.com:8080/index.html 调用 http://www.123.com:8081/welcome.jsp   端口不同,非同源。

  ④、http://www.123.com/index.html 调用  http://www.456.com/welcome.jsp       域名不同,非同源。

  ⑤、http://localhost:8080/index.html 调用 http://127.0.0.1:8080/welcom.jsp        虽然localhost等同于 127.0.0.1 但是也是非同源的。

  同源策略限制的情况:

  1、Cookie、LocalStorage 和 IndexDB 无法读取

  2、DOM 和 Js对象无法获得

  3、AJAX 请求不能发送

3.解决跨域问题的nginx配置

#设置需要跨域的指定文件
location ^~/res/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods \'GET,POST\';
    add_header Access-Control-Allow-Headers \'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization\';
    alias /data/web/res/;
}    
#设置允许全局跨域
server {
   .... add_header Access
-Control-Allow-Origin *; add_header Access-Control-Allow-Methods \'GET,POST\'; add_header Access-Control-Allow-Headers \'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization\'; }

 

4.代码层面的跨域问题:

DOMException: Blocked a frame with origin "http://ip:7456" from accessing a cross-origin frame.

解决办法:浏览器同源政策及其规避方法:https://www.techug.com/post/same-origin-policy.html

以上是关于[转] nginx 配置站点跨域的主要内容,如果未能解决你的问题,请参考以下文章

Nginx 跨域

nginx跨域(转2)

Nginx通过CORS实现跨域(转)

Nginx使用“逻辑与”配置origin限制,修复CORS跨域漏洞

如何搞定前端资源服务跨域问题之nginx篇

学Python运维,这知识点你肯定会遇到,必收藏之nginx 域名跳转相关配置