ajax的同源策略

问题

之前帮忙做的广告机器人数据提交的部分，利用ajax的XMLHTTPRequest提交到服务器的时候总是报错，错误类型是不同源。想到浏览器中的同源策略，明白了问题的原因。

同源策略

简单的说，就是浏览器不允许两个不同源的域名之间交换信息，那么这里就有两个问题。一是，什么信息不允许交换；二是，怎样算不同源。

阮一峰的这篇博客浏览器同源政策及其规避方法其实已经介绍得比较清楚。引用一下，第一个问题：

目前，如果非同源，共有三种行为受到限制。
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。

第二个问题：

所谓"同源"指的是"三个相同":
协议相同
域名相同
端口相同

同源策略的目的就是为了浏览器的安全，防止恶意脚本的肆意破坏。但是值得注意的是，<script>,<img>,<iframe>等，像类似这种带“src”属性的标签是可以跨域加载资源的，只不过限制了其读写返回的内容。

解决办法

可以看到的是，同源策略限制了ajax的不同源请求，那么有时候我们还是需要跨域的，如何解决这个问题呢？阮一峰老师在这篇文章中也给出了三种方法。

1. 利用JSONP
2. websocket
3. CORS

第一种方法是利用了像<script>这样的标签可以加载跨域资源，客户端向服务端请求JSON数据，服务端通过将数据放在回调函数中传回来。

第二种方法本质原理是websocket请求头中本身就有origin信息，服务器可以通过这个源信息判断要不要给它传数据，所以websocket不受同源策略的影响。

第三种方法原理和第二种方法类似，就是在请求中多出一个origin头信息，然后服务端收到信息后，判断要不要给它传数据，并且在返回的信息中多加入几个头信息来传达接收或不接受的信息，从而浏览器做出反应。具体的可以参考阮一峰的文章跨域资源共享 CORS 详解

总结

我在实际的项目过程中，使用了第三种方法，在后台对php和apache进行了跨域的设置。具体可以参考# Ajax 跨域，这应该是最全的解决方案了
。

但是奇怪的是，客户端放到移动端之后，就好像没有跨域的问题了，同样的服务端，在电脑上显示跨域问题，在手机上操作就可以提交了，这是我没想明白的地方。