JavaScript跨域问题的解决方式
首先我们要了解什么是跨域?
当一个请求url的 协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
JSONP (JSON with Padding)
通过动态创建 script,再请求一个带参网址实现跨域通信。
CORS (跨域资源共享)
CORS的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。
普通跨域请求:只需服务端设置 Access-Control-Allow-Origin
即可,前端无须设置,若要带 cookie 请求:前后端都需要设置。前端设置withCredentials
为true,后端设置Access-Control-Allow-Credentials
为true,同时Access-Control-Allow-Origin
不能设置为*
目前,所有浏览器都支持该功能(IE8+;IE8/9 需要使用 XDomainRequest 对象来支持 CORS),CORS 也已经成为主流的跨域解决方案。
window.postMessage
现代浏览器中多窗口通信使用 HTML5 规范的 targetWindow.postMessage(data, origin);其中 data是需要发送的对象,origin 是目标窗口的 origin。window.addEventListener(‘message’, handler, false);handler 的 event.data 是 postMessage 发送来的数据,event.origin 是发送窗口的 origin,event.source 是发送消息的窗口引用
服务器代理
内部服务器代理请求跨域 url,然后返回数据