同源策略
同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。注意是浏览器限制,服务端之间请求是没有跨域限制的。同源指的是指的是“三个相同”:协议、端口号、域名必须一致。
同源政策主要限制了三个方面:
1、当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
2、当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
3、当前域下 ajax 无法发送跨域请求。
同源政策目的
同源政策的目的主要是为了保证用户信息的安全,防止恶意的网站窃取数据,它只是对 js 脚本的一种限制,并不是对浏览器的限制,对于一般的 img、或者script 脚本请求都不会有跨域的限制,这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。
不受同源限制
有三个标签是允许跨域加载资源:
<img src=XXX>
<link href=XXX>
-
<script src=XXX>
浏览器跨域问题
其实就是浏览器的同源策略造成的。跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。
解决浏览器跨域问题
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
总结
简单的跨域请求jsonp即可,复杂的cors,窗口之间JS跨域postMessage,开发环境下接口跨域用nginx反向代理或node中间件比较方便。
CORS 报错案例
1、报错图片