在跨域请求 RESTful API 时，可能会遇到一个 CORS 的问题，这也是前端开发中比较常见的一个问题。本文将会介绍 CORS 的概念，问题产生原因，以及如何解决 CORS 问题。
什么是 CORS
CORS，即跨域资源共享，是一种跨域技术。跨域是指在一个域名下的文档或脚本试图去请求来自另一个域名下的资源。这时候，浏览器就会发出一个 CORS 请求。CORS 是一个W3C标准，全称为“跨域资源共享”（Cross-origin resource sharing）。
产生 CORS 问题的原因
CORS 的出现是为了增强 Web 的安全性。当浏览器执行跨域访问时，服务器需要在响应头中增加一些字段，这些字段规定了在跨域请求时允许的访问类型。但是，在一些场景下服务器没有设置这些响应头，或者设置不正确，就会导致 CORS 问题。
一般来说，CORS 问题是由浏览器发送的一个 OPTIONS 请求引起的。也就是说，在发送真正的请求之前，浏览器会先发送一个 OPTIONS 请求来询问服务器是否允许跨域访问。
如何解决 CORS 问题
下面将介绍两种解决 CORS 问题的方法：
方法一：设置服务器响应头
在服务器端设置响应头，允许跨域访问。为了避免对整个服务器设置产生影响，可以只允许特定的来源访问。下面是一个示例：
Access-Control-Allow-Origin: https://www.example.com Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: Content-Type Access-Control-Max-Age: 86400
上面的示例中，Access-Control-Allow-Origin 允许来自 https://www.example.com 的跨域请求。Access-Control-Allow-Methods 表示允许的请求方法，此处允许 GET、POST、OPTIONS 请求。Access-Control-Allow-Headers 表示允许的请求头，此处允许 Content-Type 请求头。Access-Control-Max-Age 表示 OPTIONS 请求的缓存时间，这里设置为 86400 秒。
方法二：使用代理服务器
在前端代码中，可以使用代理服务器的方式来解决 CORS 问题。该方法的原理是在同一域名下使用代理后端接口。前端代码访问代理服务，由代理服务器转发请求至后端接口，最终将结果返回给前端。这里使用 Node.js 的 http-proxy 库来实现一个简单的代理示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ----------------------
----- ----------- - -----------------------------
------- ------------------------
---
----------------------- ----- ---- ---- -- -
-------------------
------------------ -
--------------- ------------
---
------------------ ---- ---------
---
----- ------ - ----------------------- ---- -- -
-- -------
-------------------- -----
---
------------------- -- -- -
------------------ ------ --------- -- ---- -------
---上面的代码中，我们创建了一个代理服务器，并将其绑定到 localhost:8000 上。当前端访问代理服务器时，它将请求代理到后端接口 localhost:3000。
最后，在前端代码中访问代理服务器即可解决 CORS 问题：
const apiUrl = 'http://localhost:8000/api';
fetch(apiUrl)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));总结
本文介绍了 CORS 的概念、产生原因以及解决方法。在实际开发中，我们应该了解 CORS 的原理，并且根据具体场景选择合适的解决方法。通过良好的编码习惯和正确的解决方法，可以更好地避免 CORS 问题的出现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0aab983d39b48814ff55f