同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所谓同源（即指在同一个域）就是两个页面具有相同的协议（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;
}
}
}
网友评论