什么是跨域资源共享问题
当前端 web 应用和后端服务不在同一个域下时，就会遇到跨域的问题。浏览器为了安全起见，会限制在浏览器端发起的跨域请求。比如，你的前端应用部署在 http://localhost:3000 ，而你的后端服务部署在 http://api.example.com ，这时候就会出现跨域请求的问题。
解决跨域问题的一种方式是通过 CORS（Cross-Origin Resource Sharing） 协议。CORS 允许浏览器向其它域发出请求，同时在服务端进行类似于白名单的限制，只允许指定的域访问。
解决跨域问题的方式
配置 CORS
在 Express.js 中，可以通过 cors 模块来配置 CORS。
你可以按照以下步骤来配置：
- 安装
cors模块。
npm install cors
- 在 Express.js 应用中使用
cors中间件
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'http://example.com' // 指定允许请求的域名
}));上面的代码表示只允许 http://example.com 的域名发出请求，其它域名的请求将被拒绝。
你还可以通过配置 cors 的参数来满足不同的需求。比如，你可以通过将 origin 设为 *，来允许任意域名的请求。
app.use(cors({
origin: '*'
}));这样，任意域都可以发起请求。
JSONP
另一种解决跨域问题的方式是使用 JSONP（JSON with Padding）。JSONP 是一种被广泛使用的解决跨域问题的方式，它的基本原理是动态创建一个 <script> 标签，通过异步加载的方式把请求数据传给浏览器。同时，由于 <script> 标签不受同源策略限制，因此可以实现跨域请求的数据传输。
以下是一个使用 JSONP 的示例：
-- -------------------- ---- ------- -- ----- -------- ---------- --------- - ----- ------------ - --------------------- ----- ------ - --------------------------------- ---------- - ---------------------------------- ---------------------------------- -------------------- - --------- - -------- ---------------- - ------------------ - ------------------------------------ ------------
// 服务端代码
app.get('/data', (req, res) => {
const data = { name: 'tom' };
const callbackName = req.query.callback;
res.send(`${callbackName}(${JSON.stringify(data)})`);
});客户端通过 jsonp 函数传入自己的回调函数，然后将回调函数名字生成一个唯一的地址参数 callbackName 传给服务器。服务器端根据传进来的参数拼装成 jsonp 格式的数据返回给客户端。
总结
本文介绍了解决 Express.js 跨域资源共享问题的两种方式：配置 CORS 和使用 JSONP。CORS 是一种基于标准的解决方案，它可以通过在服务器端进行配置来限制对不同域的访问。而 JSONP 则是一种动态加载脚本，通过将数据封装在一个 JavaScript 函数的参数中，以传递数据的方式实现跨域请求。
根据实际情况，你可以选择使用其中一种或者两种方案一起使用来解决跨域请求的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ed18e968c7c53b0d24efd