如何正確設置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的文檔。 文獻資料