前端跨域

前端与服务端数据交互时，涉及到跨域的一些问题。JavaScript出于安全的考虑，禁止了跨域调用其他页面的对象，也即同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。

同源策略/SOP（Same origin policy）是一种约定，属于浏览器的一个安全功能。不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

基于这个策略，有以下几种限制：

• cookie：js不能读取其它域下的cookie，否则你的登录信息，安全信息就泄露了；
• Storage和IndexDB： 道理同cookie；
• DOM 和 JS 对象；
• AJAX请求：不能发送另一个域下的Ajax请求；

什么是跨域？

如果违反了同源策略，则就会产生跨域。哪些情况才算是跨域呢？

1. 页面域名不同： http://a.com 和 http://b.com 不同源
2. 父级域名相同，子域名不同： http://a.c.com 和 http://b.c.com 不同源
3. 端口不同：http://a.com:8888 和 http://a.com:8000 不同源
4. 协议不同： http://a.com 和 https://a.com 不同源

解决跨域的方式

jsonp跨域

jsonp跨域的原理很简单，借鉴了html中script脚本可以来自不同域的原理。想一想是不是script中的src属性值可以设置为来自第三方的js。
但是这也限制了jsonp只能做GET请求，同时需要后端做配合。

举例说明：

有一个跨域的请求： http://c.com/getInfo?id=xxx。因为同源策略的限制，我们通过Ajax无法操作。那么使用jsonp，该如何绕过跨域的限制呢？直接看代码：