3000字说说跨域！面试官听完以后露出了满意的笑容😎

2020年3月18日
《每日一题系列🚀》
做者：王二狗
博客：掘金、思否、知乎、简书、CSDN
点赞再看，养成习惯，每日一题系列会一直更新下去，大家的支持是我持续分享的最大动力😘php

同源策略

在说跨域以前，首先须要了解的一个概念就是”同源策略“。html

什么是源？

源=协议+域名+端口号。ajax

若是两个url的协议、域名、端口号彻底一致，那么这两个url就是同源的。json

咱们能够经过window.origin或location.origin获得当前源。segmentfault

https://wang.com
https://ergou.com
//不一样源，域名不一致（记住：只有彻底如出一辙才算同源）

http://wang.com/index.html
http://wang.com/server.php
//同源

localhost 调用 127.0.1 
//不一样源
复制代码

什么是同源策略？

同源策略即：不一样源之间的页面，不许互相访问数据。后端

浏览器规定：若是JS运行在源A里，那么就只能获取源A的数据，不能获取源B的数据，即不容许跨域。api

假设 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 请求）

告诫本身，即便再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。共勉！

文章中若有不对的地方，欢迎小伙伴们多多指正。

谢谢你们~ 💘