彻底读懂前端跨域CORS

前端

2023-09-27 02:55:30

甩锅大战

在开发中，前端小伙伴使用AJAX进行请求时，经常会遇到No Access-Control-Allow-Origin header这样的报错提示，令人头疼不已，各种甩锅大战由此展开。

跨域的本质

跨域，即跨源资源共享，是指一个域的网站或网页想要访问另一个域的资源。在浏览器中，出于安全考虑，同源策略会限制一个域的网站或网页只能访问来自相同域的资源。因此，如果一个网站或网页想要访问另一个域的资源，就会触发跨域请求，并受到浏览器的限制。

跨域的安全问题

跨域会带来安全问题，主要包括以下几点：

信息泄露： 跨域请求可能会导致敏感信息被泄露，例如用户密码、信用卡号等。
钓鱼攻击： 跨域请求可能会被用来进行钓鱼攻击，即诱骗用户访问恶意网站，窃取用户隐私信息。
脚本攻击： 跨域请求可能会被用来加载恶意脚本，在用户不知情的情况下执行，对用户系统造成危害。

跨域的解决方法

为了解决跨域问题，浏览器提供了跨域资源共享（CORS）机制。CORS是一组HTTP首部，允许服务器端指定哪些源可以访问其资源。

同源策略： 同源策略是浏览器的安全策略，它限制了一个域的网站或网页只能访问来自相同域的资源。同源策略是通过比较请求的源（协议、主机名、端口）来实现的。
简单请求： 简单请求是指不使用自定义HTTP方法（如PUT、DELETE等）、不使用自定义HTTP头、不携带请求正文、不设置请求头文件Content-Type的数据传输，也不携带敏感头信息。简单请求是不会触发预检请求的，因此可以绕过跨域限制。
预检请求： 预检请求是一种特殊的HTTP请求，用于询问服务器是否允许客户端进行跨域请求。预检请求会使用OPTIONS方法，并且会在请求头中携带Origin、Access-Control-Request-Method、Access-Control-Request-Headers等头信息。服务器收到预检请求后，会返回允许或拒绝的响应，客户端根据响应决定是否进行实际的跨域请求。
跨域资源共享请求首部： 跨域资源共享请求首部允许服务器指定哪些源可以访问其资源。这些首部包括：
- Access-Control-Allow-Origin： 指定允许哪些源访问该资源。
- Access-Control-Allow-Credentials： 指定是否允许客户端发送凭证（如Cookie、HTTP认证信息等）。
- Access-Control-Allow-Methods： 指定允许客户端使用哪些HTTP方法访问该资源。
- Access-Control-Allow-Headers： 指定允许客户端在请求中携带哪些HTTP头。
- Access-Control-Max-Age： 指定预检请求的有效期，单位为秒。
跨域资源共享响应首部： 跨域资源共享响应首部允许服务器告知客户端跨域请求的结果。这些首部包括：
- Access-Control-Allow-Origin： 指定允许哪些源访问该资源。
- Access-Control-Allow-Credentials： 指定是否允许客户端发送凭证（如Cookie、HTTP认证信息等）。
- Access-Control-Expose-Headers： 指定服务器允许客户端访问哪些响应头。
- Access-Control-Max-Age： 指定预检请求的有效期，单位为秒。