阅读目录：
深入跨域问题(1) - 初识 CORS 跨域资源共享（本篇）
跨域问题，一直困扰我们非常久，特别是在前后端分离开发条件下，几乎一定会遇到跨域问题。
跨域也有很多解决方案：JSONP，iframe，代理，反向代理等。
如果是与后台一起开发过的小伙伴，肯定对这一句感到熟悉：
Access-Control-Allow-Origin: *
其实，这就已经属于 CORS 跨域资源共享的内容了，但是，前端和后台交互的时候仍然存在很多很多问题。
这些问题的主要原因：你和后台并不熟悉 CORS ，不仅后端需要了解 CORS ，前端也要非常熟悉 ！！！
在这篇文章里面，我主要阐述 CORS 跨域资源共享，在后续文章中，我会采用 node 模拟出跨域并解决。
image
产生跨域的条件
浏览器安全的基石是 同源策略，什么是同源策略呢？言简意赅，就是三个相同：
- 协议相同。
- 域名相同。
- 端口相同。
这三者相同的情况下，才被称作 “同源”，同源策略，可以保证你的服务器的接口是隐私的。
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 // 服务器
这个例子，我想不用过多解释了吧。
image
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 拥有新的认知。
image
参考与鸣谢：
- HTTP访问控制（CORS） MDN 文档 。
- 浏览器同源政策及其规避方法 阮一峰。
- 跨域资源共享 CORS 详解 阮一峰。
十分感谢上述参考链接的作者，他们的文章是十分有深度和值得多多研读的。
网友评论