从一脸懵逼到掌握跨域 🍉

哔哔不吃鱼
742 阅读6分钟

同源策略

在了解跨域之前，我们先来看看同源策略这个知识

一个源的定义

如果两个页面的协议，端口和域名都相同，那么这两个页面就具有相同的源。 举个例子：

下面的表相对http://www.bb.com 进行同源检测。

url 结果 原因
http://www.bb.com/a.html 成功
http://www.bb.com/a/c/d.html 成功
https://www.bb.com/a/c/d.html 失败 不同协议(https和http)
http://www.bb.com:520/a/c/d.html 失败 不同端口(80和520)
http://www.cc.com/a/c/d.html 失败 不同域名(bb和cc)

为什么要有这个策略？

这个策略是一个浏览器的安全功能。不同源不能够互相读写对方资源。 为了保护用户的信息安全，隔离潜在的恶意文件。所以有了这个策略。 你想想，如果别人的网站可以请求到你的网站的用户数据，是不是挺可怕的。一个莫名其妙的网站就可以随意请求别人的数据。这对于互联网来说，简直就是一场灾难。

跨域

好的我们大概了解了浏览器的同源策略，知道这个策略是为了保护我们的互联网世界。

刚开始的时候，因为浏览器有这个同源策略，所以人们为了跨域获取资源，得用一些比较非常规的办法。

JSONP（投机取巧）

HTML中 script 标签可以加载其他域下的js，比如我们经常引入其他域下线上cdn的jQuery。 人们就想利用这个特性来实现从其他域下获取数据。

我们比如说要获取另外一个网站的数据。

<script src="api.bb.com/data..."></script>

这时候会向data接口发送请求获取数据，获取数据后作为js来执行，那么获取到的数据是JSON，直接作为JS运行我怎么拿到里面的数据呢？

这样我们就需要后端进行配合了。

之前后端返回的数据:

{"name:"bibi","city":"hangzhou"}

现在后端返回的数据:

showData({"name:"bibi","city":"hangzhou"})

这样前端在script标签加载数据后，将这个数据作为js来执行，实际上就相当于调用了showData这个函数。

我们只需要提前在页面定义好showData这个全局函数，在函数内部处理参数即可。

<script>
function showData(ret){
console.log(ret);
}
<script src="api.bb.com/data..."></script>

优点

  • 兼容IE

缺点

  • 需要前后端配合
  • 只支持GET

这就是通过JSONP跨域。

人们一直使用这种办法：直到W3C出了一个标准－CORS－"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS跨域

跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。

CORS通信与同源的AJAX通信没有差别，代码完全一样。

我们只需要在响应头里加上 xx.com 可以访问就可以了。

实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

cors的两种请求

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求（simple request）

只要同时满足以下两大条件，就属于简单请求。

请求方法是以下三种方法之一：

  • HEAD

  • GET

  • POST

HTTP的头信息不超出以下几种字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

简单请求，就是在头信息中，增加一个Origin字段。 比如下面是一个跨域的AJAX请求，自动在头信息中，添加了一个Origin字段。

GET /cors HTTP/1.1
Origin: http://api.bb.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

Origin用来告诉服务器，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

如果服务器并不接受这个源，浏览器发现回应的信息头中没有Access-Control-Allow-Origin,就知道这是无效请求，并且抛出错误。

注意：种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

如果这次请求被同意了，服务器就会返回下面的响应。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的头信息中，三个都以Access-Control-开头。

  • Access-Control-Allow-Origin：该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个`*``，表示接受任意域名的请求。

  • Access-Control-Allow-Credentials:该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

  • Access-Control-Expose-Headers:该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

非简单请求（复杂请求）

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

var url = 'http://api.bibi.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字段以后，确认允许跨源请求，就可以做出回应。

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bibi.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

面的HTTP回应中，关键的是Access-Control-Allow-Origin字段，表示http://api.bibi.com可以请求数据。该字段也可以设为星号，表示同意任意跨源请求。

如果服务器拒绝预检请求，控制台就会报错。

XMLHttpRequest cannot load http://api.cc.com.
Origin http://api.bibi.com is not allowed by Access-Control-Allow-Origin.

CORS缺点：不支持IE8/9，如果要在IE8/9使用CORS跨域需要使用XDomainRequest对象来支持CORS。

如果对你有帮助的话，请点个👍吧！我们继续分享更多文章的～

本文使用 mdnice 排版

avatar
文章
阅读
粉丝