1. 问题出现环境

后端 Node.js + express，端口：6789
前端 Vue3 + Axios，端口：5173

2. 问题描述

前端在向后端请求数据时，前端出现出现 Missing Allow Origin Header 报错，后端显示请求数据回传成功

3. 问题解决方法

首先安装 cors 库

npm -i cors

其次在后端主启动文件中配置如下内容

//配置前台跨域白名单
const allowedOrigins = ['http://localhost:8080', 'http://localhost:5173'];
const corsOptions = {
origin: function (origin, callback) {
    //判断请求是否涉及跨域，如涉及则判断是否在白名单中
    if (!origin || allowedOrigins.indexOf(origin) !== -1) {
        callback(null, true);
    } else {
        callback(new Error('Not allowed by CORS'));
    }
},
//允许的请求方式
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
// 允许携带凭证（例如，使用cookies或HTTP身份验证）
credentials: true,
// 预检请求成功的HTTP状态码
optionsSuccessStatus: 204, 
// 允许的自定义头部
allowedHeaders: 'Content-Type,Authorization', 
};
// 使用CORS中间件并传递配置选项
app.use(cors(corsOptions));

4. 问题解决结果

前端能够正常请求后端接口，并获取到回传数据

5. 注意事项

这段代码需要写在 const app = express(); 之后，中间如果配置了其他内容，都可能导致CORS失效