2020年3月18日
《每日一题系列🚀》
作者：王二狗
博客：掘金、思否、知乎、简书、CSDN
点赞再看，养成习惯，每日一题系列会一直更新下去，你们的支持是我持续分享的最大动力😘
同源策略
在说跨域之前，首先需要了解的一个概念就是”同源策略“。
什么是源？
源=协议+域名+端口号。
如果两个url的协议、域名、端口号完全一致，那么这两个url就是同源的。
我们可以通过window.origin或location.origin得到当前源。
https://wang.com
https://ergou.com
//不同源，域名不一致（记住：只有完全一模一样才算同源）
http://wang.com/index.html
http://wang.com/server.php
//同源
localhost 调用 127.0.1
//不同源
什么是同源策略？
同源策略即：不同源之间的页面，不准互相访问数据。
浏览器规定：如果JS运行在源A里，那么就只能获取源A的数据，不能获取源B的数据，即不允许跨域。
假设 wang.com/index.html引用了ergou.com/1.js,那么就说1.js运行在源wang.com里
注意，这和ergou.com没有关系，虽然1.js是从它那里下载的.
所以1.js就只能获取wang.com的数据,这就是浏览器的功能，浏览器就是故意这样设计的。
为什么会有同源策略？
之所以需要使用同源策略，就是为了保护用户的隐私。
以微信为例，源为 https://user.weixin.com，假设当前用户已经登录，并且AJAX请求 /friends.json 可以获取用户好友列表。
这个时候黑客来了，他把 https://user-winxin.com分享给你，实际上这是一个钓鱼网站，你点开这个网页，这个网页也请求你的好友列表 https://user.weixin.com/friends.json。
请问，这个时候你的好友列表是不是就被黑客给偷走了？
问题的根源
之所以会出现这个问题，其根源就在于无法区分发送者。
微信里面的JS和黑客的JS发送到请求几乎没有区别（referer区别）
但是如果后台的开发者没有检查 referer，那么就完全没有区别。
所以，如果没有同源策略，任何页面都能偷走微信里面的数据，甚至是支付宝里面的余额。
安全原则
有的小伙伴可能会问，既然referer有区别，那检查referer不就好了？
安全原则：安全链条上的强度取决于安全链条上最弱的一环。
同时，万一这个网站的后端开发者是一个傻叉呢？
所以浏览器应该主动预防这种偷数据的行为。
总之，为了保护用户的隐私，浏览器设置了严格的同源策略。
如果浏览器不限制跨域，一定是这个浏览器出现了bug。
跨域
什么是跨域？
跨域，即浏览器试图执行其他网站的脚本。但是由于同源策略的限制，导致我们无法实现跨域。
关于跨域的几个问题
为什么a.wang.com访问wang.com也算跨域？
因为历史上，出现过不同的公司共用域名，a.wang.com和wang.com不一定是同一个网站，浏览器谨慎起见，认为这是不同的源。
为什么不同端口也算跨域？
原因同上，一个端口一个公司的情况也不是没有的。
记住：安全链条的强度取决于最弱的一环，所有和安全相关的问题都要谨慎对待。
为什么两个网站的IP一样，也算跨域？
原因同上，因为IP也是可以共用的。
为什么可以跨域使用CSS、JS和图片等？
同源策略限制的是数据访问，我们引用CSS、JS和图片的时候，其实并不知道其内容，我们只是在引用。
CORS跨域
什么是CORS？
CORS的全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
如何理解CORS？
如果wang.com和ergou.com这两个网站都是我的，我就是想让wang.com去访问ergou.com里面的数据应该怎么办呢？
只需要wang.com在响应头里写ergou.com可以访问即可。这就是CORS。
实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
两种请求
CORS跨域分为两种请求，一种是简单请求，另外一种就是复杂请求。
简单请求
只要满足以下条件的就是简单请求：
- 请求方式为
HEAD、POST或者GET - http头信息不超出以下字段：
Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type(限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain)
简单请求的实现具体来说就是在信息头中加入一个Origin字段：
GET /cors HTTP/1.1
Origin: http://wang.com
Host: api.ergou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0
...
Origin的作用就是用来说明本次请求来自哪个源，服务器会根据Origin的值来判断是否接受本次请求。
如果Origin所表示的源不被服务器接受，即浏览器发现回应的信息头中没有Access-Control-Allow-Origin字段，就会自动抛出一个错误。
注意：这种错误是无法通过状态码识别的，这也是通过CORS实现跨域请求的一个弊端。
如果Origin所表示的源被服务器端所接受，那么服务器就会返回如下响应：
Access-Control-Allow-Origin: http://api.ergou.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
Access-Control-Allow-Origin:该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求Access-Control-Allow-Credentials: 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。(注意：如果要发送cookie，不仅要进行上述的设置，还要在AJAX请求中设置withCredentials属性）Access-Control-Expose-Headers:该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
复杂请求
所谓复杂请求，即不满足上述条件的请求就是复杂请求。
比如请求的方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
复杂请求首先会发起一个预检请求，该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。
var url = 'http://api.wang.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
上面的请求就是一个复杂请求，当浏览器发现这是一个复杂请求之后，就会主动发出一个预检请求，询问服务器是否允许本次请求。
服务器收到预检请求之后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，才会做出相应的回应。
Access-Control-Allow-Origin: http://api.wang.com
Content-Type: text/html; charset=utf-8
CORS存在的问题
不支持IE8/9，如果要在IE8/9使用CORS跨域需要使用XDomainRequest对象来支持CORS。
JSONP跨域
什么是JSONP？
我们在跨域的时候由于当前的浏览器不支持 CORS 或者因为某些条件不支持 CORS，我们必须使用另外一种方式来跨域，于是我们就请求一个 JS 文件，这个 JS 文件会执行一个回调，回调里面就有我们需要的数据。
let script = document.createElement('script');
script.src = 'http://www.wang.cn/login?username=wang&callback=callback';
document.body.appendChild(script);
function callback(res) {
console.log(res);
}
回调函数的名字是什么？
回调的名字是可以随机生成的的一个随机数，我们把这个名字当成 callback 的参数传给后台，后台会把这个函数再次返回给我们并执行
JSONP跨域优点
- 兼容
ie - 可以跨域
JSONP跨域缺点
- 由于是
script标签，所以读不到ajax那么精确的状态，不知道状态码是什么，也不知道响应头是什么，它只知道成功和失败。 - 不支持
post（因为是script标签，所以只支持get请求）
告诫自己，即使再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。 共勉！
文章中如有不对的地方，欢迎小伙伴们多多指正。
谢谢大家~ 💘
