nginx配置跨域问题

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

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

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

  ②、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 可是也是非同源的。jsp

  同源策略限制的状况:网站

  一、Cookie、LocalStorage 和 IndexDB 没法读取spa

  二、DOM 和 Js对象没法得到code

  三、AJAX 请求不能发送

  注意:对于像 img、iframe、script 等标签的 src 属性是特例,它们是能够访问非同源网站的资源的。

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'; }
相关文章
相关标签/搜索