什么是 CORS
在跨域访问时，浏览器通常会进行同源策略的检查来防止跨站请求伪造攻击。而 CORS（Cross-origin resource sharing）是一种机制，允许网页向跨源服务器发出 XMLHttpRequest 请求，从而克服了跨域访问的限制。
如何解决 CORS 问题
CORS 的标准流程
当浏览器发起跨域请求时，会发送一个 OPTIONS 请求向服务器请求访问其 API，服务器在响应头部加上 Access-Control-Allow-Origin 等字段，告知浏览器允许访问该 API 的域名，而这个域名则取决于请求头中 Origin 字段的值。
接下来，当浏览器再次发送真正的请求时，服务器可以在响应头部加上 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等字段，告知浏览器接受哪些 HTTP 方法以及允许访问哪些 HttpHeaders。以此来控制跨域请求的访问权限。
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
next();
});JSONP 的使用
JSONP 是一种通过 script 标签进行跨域访问的方式，其原理是在服务端动态生成一些 JavaScript 代码，然后将这个代码作为响应内容返回给客户端，客户端再执行这个代码从而获得所需要的数据。
-- -------------------- ---- ------- -------- ---------- --------- - --- ------ - --------------------------------- ---------- - --- - ------------ - --------- ------------------------------------------------------------- - ---------------------------------------- -------------- -------- ---------------- - ------------------ -
需要注意的是，JSONP 方式只能用于 GET 请求，并且服务端也需要支持 JSONP。
代理服务器的搭建
代理服务器是指位于客户端和服务器之间的一台位于本地的服务器。通过让客户端访问代理服务器，再由代理服务器去访问真正的服务器，从而实现跨域访问。常见的代理服务器有 nginx、Apache、http-proxy 等。
以 http-proxy 为例，首先需要安装该依赖：
npm install http-proxy --save-dev
然后在本地搭建一个代理服务器：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ----------------------
----- ----- - ------------------------------
----------------------- ---- -- -
----- --- - --------
-- -------------------- -
-------------- ---- - ------- --------------------- ---
- ---- -
-- --- --- --
-
--------------- -- -- -
------------------ ------ -- ------- -- ------------------------
---这里以本地 8000 端口为例，当客户端访问 localhost:8000/api/getData 时，该请求就会被代理服务器转发至 https://example.com/api/getData。
总结
以上是解决 CORS 问题的几种常见方式，虽然每种方式的具体实现略有不同，但都遵循了 CORS 标准流程，只不过是基于这个流程实现了不同的方案。根据自己的需求选择适合自己的方式，就可以解决跨域访问的问题了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502a05395b1f8cacdfdd15f