跨域

什么是同源策略？

浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
本域指的是：

• 同协议：如都是 http 或 https
• 同域名：如都是 http://www.cctv.com/a 和 http://www.cctv.com/b
• 同端口：如都是 80 端口

---

什么是跨域？跨域有几种实现形式？

在受到浏览器同源策略影响下，只要协议、域名、端口有任何一个不同，都被当作不同的域，这种情况下访问资源都要针对同源策略来编写程序，这一行为称之为“跨域”

跨域的实现形式：

• JSONP：通过 script 标签引入资源，格式为 callback(data)
• CORS(跨域资源共享)
• 降域：“顶级域名”降为“次级域名”
• postMessage：用于 iframe

tips: 最近有个项目用到 vue，当然是用 webpack 构建工具，也遇到跨域问题，修改 config.js，暂且留坑

---

JSONP的原理

1. script 标签加载的脚本文件不受同源策略影响
2. 前后端约定函数名作为参数 callback
3. 后端将参数 callback 与所需的数据 data 包装成 callback(data) 形式
4. script 标签加载的脚本文件加载完成后会立即执行
5. 约定的函数会带着 data 执行

---

CORS(跨域资源共享)

当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该响应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据，此种方式，表现上与同源 ajax 无异