在前端开发中，我们经常会涉及到跨域资源共享（CORS）。CORS 机制允许一个网站向另一个网站发起 AJAX 请求，但是这种机制也存在一些潜在的安全问题和常见的错误。在本文中，我们将介绍可能遇到的 CORS 错误，并提供深入学习和指导意义。
什么是 CORS？
CORS 是一个浏览器安全特性，它允许服务器指示其信任哪些来源的请求。当使用 XMLHttpRequest 或 Fetch 等 API 向不同域的服务器发送请求时，浏览器会根据 CORS 规则来判断是否允许该请求。
CORS 规则通常由服务器设置。服务器可以通过 HTTP 响应头来指定允许的来源、请求方式和其他参数。如果请求不符合规则，则浏览器会拒绝该请求并抛出 CORS 错误。
可能遇到的 CORS 错误
1. 同源策略限制
同源策略是浏览器的一项安全措施，它防止来自不同源的 JavaScript 发送和接收数据。如果你尝试从不同源的页面上发送 AJAX 请求，就会遇到同源策略限制。你需要在服务端设置正确的 CORS 头部以允许请求来自跨域的页面。
以下是一个 HTTP 响应头示例，允许来自 example.com 的 GET 请求：
Access-Control-Allow-Origin: http://example.com
2. 预检请求失败
对于某些类型的请求（例如带有自定义头部的 POST 请求），浏览器会先发送一个预检请求（OPTIONS 请求）以确认服务器是否允许实际请求。如果预检请求失败，则浏览器会抛出 CORS 错误。
以下是一个预检请求的 HTTP 响应头示例：
Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization Access-Control-Max-Age: 86400
其中 Access-Control-Allow-Methods 指定了允许的请求方式，Access-Control-Allow-Headers 指定了允许的头部字段，Access-Control-Max-Age 指定了该预检请求的有效期。
3. 凭证标记错误
如果你需要在请求中传递凭证信息（例如 cookies 或授权头部），你需要设置凭证标记。如果凭证标记未设置或设置不正确，浏览器会拒绝该请求并抛出 CORS 错误。以下是一个设置凭证标记的 HTTP 响应头示例：
Access-Control-Allow-Credentials: true
如何解决 CORS 错误
在前端开发中，我们通常无法直接修改服务端设置。但是，我们可以通过以下几种方式来解决 CORS 错误：
1. 使用代理
你可以在本地搭建一个代理服务器，将跨域请求转发到该代理服务器。由于服务端与代理服务器是同源的，因此不存在 CORS 问题。代理服务器将处理实际请求并将响应返回给客户端。
2. JSONP 跨域
JSONP 是一种利用 <script> 标签实现跨域请求的技巧。实现原理是在客户端动态创建一个 <script> 标签，该标签的 src 属性指向服务端接口地址，服务端将数据包装成一个函数调用并返回给客户端。客户端定义一个回调函数来接收数据，并在 <script> 标签中调用该函数。
3. 跨域资源共享
如果服务端正确设置了 CORS 头
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15223