1. 同源策略

浏览器故意设计的一个功能限制

1.1 源

• 源 = 协议 + 域名 + 端口号
• window.origin或location.origin可以得到当前源

1.2 同源策略定义

• 浏览器规定：如果js运行在源A里，那么就只能获取源A的数据，不能获取源B的数据，即不允许跨域

1.3 问题的根源

• 无法区分发送者，发的请求几乎没区别（可以通过referer区分，但如果忘了呢）

2. CORS

突破浏览器限制的一个方法

• 在响应头中增加 Access-Control-Allow-Origin：MDN文档

Access-Control-Allow-Origin: http://localhost:9999

3. JSONP

IE时代的妥协

3.1 定义

在跨域场景下，无法使用CORS时，通过创建一个script标签请求一个js文件，js文件中有调用回调函数，回调函数的入参为想跨域拿到的数据，在回调函数中对获取的数据进行处理

3.2 步骤

a.com 访问 b.com 中 x 文件的内容

1. m.js中已经有一个window.f({{data}})语句 （m.js属于b.com）
2. b.com将x文件的内容写到 m.js，替换{{data}}
3. window.f(data)的函数实现写在 n.js 中 （n.js属于a.com）
4. 在n.js中新增script标签引用 m.js，将script标签插入HTML
5. 此时就会执行window.f(data)函数，对获取的数据进行处理

3.3 优缺点

• 优点

1. 支持IE
2. 支持跨域

• 缺点

1. 由于是script标签，所以读不到ajax那么精确的状态
2. 由于是script标签，只能发get请求