如何正确设置ExpressJs API CORS

Question

我有一个使用axios的单页应用程序（SPA），它试图从在同一服务器上运行的ExpressJS Api获取信息。

在SPA axios设置中，我具有以下内容：

headers: {
 'Access-Control-Allow-Origin': '*',
 'Authorization': store.getters.token,
 'user': store.getters.user
},

在API中，我使用的是npm包cors，如下所示：

const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const cors = require('cors');

const app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(cors());

const indexRouter = require('./routes/index');
const adminRouter = require('./routes/adminRoute');
// More routes

app.use('/api', indexRouter);
app.use('/api/admin', adminRouter);
app.use('/api/user', userRouter);
// using more routes

在本地运行时，此方法工作正常，但是将api放置在服务器上（使用节点应用程序）时，出现CORS错误：

跨域请求被阻止：“相同来源策略”不允许在mysite.com上读取远程资源。 （原因：CORS请求未成功）。

我可以直接从浏览器访问api并获得响应，而不会出现问题（因为它没有使用交叉引用），但是至少我知道该API正在运行。

我尝试创建以下内容（在定义路线之前），但未成功：

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");
  next();
});

我究竟做错了什么？

Answer 1

真的很奇怪，允许任何事情app.use(cors())需要编写app.use(cors()) ，它现在应该可以正常工作了，因为在app.use(cors())您可以写：

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");
  next();
});

那么您应该尝试使用cors（）中间件。 为了正确设置cors，请检查cors的文档。 文献资料