javascript 跨域访问

作为一个web开发者，一定会用到ajax 页面不刷新的数据交互。

下面介绍几种不同域名下的数据进行ajax数据交互的手段 ，No Access-Control-Allow-Origin 常会遇到的ajax请求问题，这是因为同源策略引起的问题

不同源的情况

• https://www.mysite.com/ – Different protocol (or URI scheme).
• http://www.mysite.com:8080/myUrl – Different port (since HTTP requests run on port 80 by default).
• http://www.myothersite.com/ – Different domain.
• http://mysite.com/ – Treated as a different domain as it requires the exact match (Notice there is no www.).

1 改变源 适用于 父子域名之间的跨域访问 note:使一个域与另一个域不同的端口进行交互

document.domain = 'mysite.com';

2 使用web代理 如果两个域没有任何关系，需要先发送请求到自己域下的一个连接下，然后通过这个连接下的后端语言方法,把请求转发到指定域下。

3 使用JSONP 利用script标签绕过浏览器的同源策略。打个比方：就像引用CDN上的jquery脚本库一样，虽然不在同一个域名下，可以交互数据。JSONP利用script标签的动态请求，把请求的JSON数据包含到一个callback回调方法中传输。只需要调用该方法就可以完成数据的跨域请求传输

请求的链接
<script src="http://www.myothersite.com/get_data?callback=myFunction"></script>

原始的数据
{
  "id": "123",
  "name": "Captain Jack Sparrow"
}

相应的数据
myFunction({"id": "123", "name": "Captain Jack Sparrow"});
 

4 安全漏洞 cross site request Forgery (CSRF) 伪造跨域攻击

因为script标签可以绕过浏览器同源策略，恶意性网站可以通过同一个url 拿到用户的敏感数据，用这些数据进行非法操作。可以通过cookies和tokens的验证请求,防止CSRF攻击。

5 总结：

JSONP 只可以发送GET请求 不能通过jsonp进行CRUD操作,可以通过RESTful Api 实现代理请求

 

出处：http://www.sitepoint.com/working-around-origin-policy/

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests