浏览器跨域的解决方案

2018-05-26  本文已影响0人  浮名虚誉架构师

同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)端口号(port)。同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互

非同源限制

1.无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

2.无法接触非同源网页的 DOM

3.无法向非同源地址发送 AJAX 请求,即 XHR 请求

跨域的解决思路 

避免非同源限制

1.让浏览器不做限制,指定参数,让浏览器不做校验,但该方法不太合理,因为它需要较多改动

2.不要发出 XHR 请求,这样就算是跨域,浏览器也不会有非同源限制,解决方案是 JSONP,通过动态创建一个 script,通过 script 发出请求

跨源资源共享方案

根据 W3C 的跨源资源共享方案(即CORS),在被调用方修改代码,加上字段,告诉浏览器该网站支持跨域

隐藏跨域(推荐)

使用 Nginx 反向代理,在 a 域名里面的的请求地址使用反向代理指向 b 域名,让浏览器以为一直在访问 a 网站,不触发跨域限制

修改nginx.conf文件如下:

http{

server{

...

location /{

root  html;

index  index.html index.htm;

}

# 加入的内容        

location /api{

proxy_pass http://localhost:8887/api;

}

}

}

上一篇 下一篇

猜你喜欢

热点阅读