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

  点击上方 **好好学java **，选择 **星标 **公众号

重磅资讯、干货，第一时间送达
今日推荐：是时候扔掉Postman了，又一个被低估的IDEA插件出来了...个人原创+1博客：点击前往，查看更多

作者：前端求职中_杭州_感谢内推
链接：https://juejin.im/post/5e74e690e51d4526d87c93df

同源策略

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

什么是源？

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

如果两个 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 请求）

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

原文地址：https://sihai.blog.csdn.net/article/details/109465274