阅读目录

深入跨域问题(1) - 初识 CORS 跨域资源共享（本篇）

深入跨域问题(2) - 利用 CORS 解决跨域

深入跨域问题(3) - 利用 JSONP 解决跨域

深入跨域问题(4) - 利用代理服务器解决跨域

前言

跨域问题，一直困扰我们非常久，特别是在前后端分离开发条件下，几乎一定会遇到跨域问题。

跨域也有很多解决方案：JSONP，iframe，代理，反向代理等。

如果是与后台一起开发过的小伙伴，肯定对这一句感到熟悉：

Access-Control-Allow-Origin: *

其实，这就已经属于 CORS 跨域资源共享的内容了，但是，前端和后台交互的时候仍然存在很多很多问题。

这些问题的主要原因：你和后台并不熟悉 CORS ，不仅后端需要了解 CORS ，前端也要非常熟悉！！！

在这篇文章里面，我主要阐述 CORS 同源策略，在后续文章中，我会采用 node 模拟出跨域并解决。

产生跨域的条件

浏览器安全的基石是 同源策略，什么是同源策略呢？言简意赅，就是三个相同：

协议相同。
域名相同。
端口相同。

这三者相同的情况下，才被称作 “同源”，同源策略，可以保证你的服务器的接口是隐私的。

CORS 跨域资源共享就是指，在这个三者 一个或者多个不同 的情况下，允许跨源获取服务器接口的内容。

但是，既然要突破 同源策略 ，那么 CORS 必须遵守一定规则来保证服务器的数据安全。

跨域的例子：

端口不同：

假设，你的电脑现在有开启了两个服务器，分别在 不同的端口 ：

http://localhost:8080/index.html	// 发送 ajax 请求

http://localhost:3000	// 		提供接口

在这里，这个服务器并没有遵守 同源策略 了，此时，就产生了跨域问题。

协议不同：

举一个很常见的例子，双击打开一个 html 文件，你会看到浏览器上你会看到：

file:///Users/xxx/Documents/index.html	// 客户端

http://localhost:3000	// 	服务器

这就是简单的 协议不同 的跨域例子，这个例子，也是我们最好实现的例子。。。

域名不同：

这个更明显了:

https://www.xxx.com/index.html	// 客户端

https://www.yyy.com		// 服务器

这个例子，我想不用过多解释了吧。

CORS 资源共享

我想，大多数人在看 MDN 文档上面的解释时，也会一脸懵逼吧，感觉很有道理的样子但不知道该怎么用。

说白了，CORS 只是在 HTTP 协议内部，新增了若干个 首部字段 ，来制定跨域资源共享的实现规则。

这些首部字段，有哪些呢？？？ HTTP访问控制（CORS） MDN 文档 。

预请求

此规则规定，处于跨域环境并在下面几个条件下，浏览器会发送两个请求给服务器；

举例说明：假设客户端需要发起 PUT 请求

首先，客户端要发送 OPTIONS 请求 给服务器。
在服务器内部，需要对 OPTIONS 请求 ，做出一些设定，告诉客户端 是否允许访问 。
客户端确认服务器允许该方法，最终发送 PUT 请求；否则，抛出错误，服务器拒绝访问此方法。

这种设定保证了服务器的安全性，服务器可控制客户端访问的内容！！！

触发预请求有三种情况：

使用了某些方法，比如说 PUT, DELETE 等。
Fetch 规范规定了对 CORS安全的首部字段集合，人为设置会触发预请求。
Content-Type的值不是text/plain ，multipart/form-data，application/x-www-form-urlencoded

由于篇幅原因，我并没有完全列出，请查阅 HTTP访问控制（CORS） MDN文档。

非预请求：

此规则规定，在跨域产生的条件下，某些请求和方法，不需要预请求，只发送一个请求就行了。

简单的请求比如说：GET, POST, HEAD 这三个方法。

思考题目：

现在，有一个场景，我们需要用 ajax 发送一个请求，请问是否能够触发预请求 ?

例子1:

var data = { name: 'BruceLee', password: '123456' };

$.ajax({
    url: "http://localhost:3000",
    type: "get",
    success: function (result) {
        console.log(result);
    },
    error: function (msg) {
        console.log(msg);
    }
})

例子2：

var data = { name: 'BruceLee', password: '123456' };

$.ajax({
    url: "http://localhost:3000",
    type: "post",
    success: function (result) {
        console.log(result);
    },
    error: function (msg) {
        console.log(msg);
    }
})

例子3：

var data = { name: 'BruceLee', password: '123456' };

$.ajax({
    url: "http://localhost:3000",
    type: "post",
    data: JSON.stringify(data),
    contentType: 'application/json;charset=utf-8',
    success: function (result) {
        console.log(result);
    },
    error: function (msg) {
        console.log(msg);
    }
})

仔细分析上述的三个例子，例子很简单，作为前端的你，会对 CORS 拥有新的认知。

参考与鸣谢：

十分感谢上述参考链接的作者，他们的文章是十分有深度和值得多多研读的。