跨域问题解决方案

跨域概念介绍

为了保证用户信息的安全，防止恶意的网站窃取数据,引入了同源政策。同源指协议、域名、端口三者相同，同源政策就是限制非同源访问测策略。

随着互联网的发展，同源政策也越来越严格。目前非同源主要有如下三种限制：

1. Cookie、LocalStorage 和 IndexDB 无法读取;
2. DOM 无法获得;
3. AJAX 请求不能发送;

非同源访问引发的问题就是跨域访问问题，有些时候需要跨域协调处理问题，那么如何解决呢？

cookie

1. 保持两个网站的 document.domain 相同，cookie即可以访问
2. 片段标识符：在父子窗口的场景可以通过片段标识符（location.hash）来修改或获取信息。通过监听 hashchange 事件来获取更新
3. window.name 修改
4. PostMessage

LocalStorage解决方案

1. PostMessage

ajax

ajax和其它两种跨域情况不一样，前面两种仅仅是获取数据。ajax可以获取数据，同时修改数据。我们可以通过三种方式来规避跨域问题。

• JSONP
• WebSocket
• CORS

JSONP 是通过动态添加一个脚本到页面，通过回调函数来实现跨域ajax调用。其核心原理是将ajax调用修改为资源访问，将调用权限赋给对方；由对方使用回调函数处理。

window.onload = function () {
  addScriptTag('http://mydemo.com/jsonp?callback=foo');
}
function jsonpCallback(jsonpresult) {
  console.log(jsonpresult);
}

WebSocket 是一种操作tcp/udp的实现方式，通过底层通信技术解决通信问题。

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

不管哪种解决方案，都需要服务提供者和客户端两种同时做改造。

form表单提交会发生跨域吗？

我们的域名是 www.demo.com ，如下代码会发生跨域吗？

    <form action="http://baidu.com"  method="post" id="myForm">
        <input name="demo" id="demo" value="aaa"> 
        <input name="sign" id="sign" value="aaa"> 
        <button v-on:click="submitFile($event)">submit</button>
    </form>

这里既没有获取cookie、也没有获取dom、更没有ajax调用，所以没有跨域。