阅读 1187

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

阅读目录

深入跨域问题(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 请求

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

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

触发预请求有三种情况:

  1. 使用了某些方法,比如说 PUT, DELETE 等。
  2. Fetch 规范规定了对 CORS安全的首部字段集合,人为设置会触发预请求。
  3. Content-Type的值不是text/plainmultipart/form-dataapplication/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 拥有新的认知。

参考与鸣谢:

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