Axios 如果第一個請求返回 400，則第二個請求將失敗並出現 CORS 錯誤，但如果返回 200，則工作正常

Question

我有一個從 Express API 獲取數據的 React 應用程序。 我有一個 function 更新一些數據然后重新獲取數據。 更新成功時（代碼為 200），它工作正常。 但是當更新失敗時（例如代碼 409），之后再次獲取數據的請求將失敗，並出現 CORS 錯誤。 CORS 在后端配置，所以我不知道這可能來自哪里。

Access to XMLHttpRequest at THE_URL from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

更新失敗是正常行為。 例如，用戶可能正在嘗試激活已激活的元素。 發生這種情況時，API 會返回 409 錯誤。 因此，當我得到 409 時，GET function 直接在獲取數據后完全失敗。 Axios 錯誤消息是Network Error 。

如果有幫助，API 托管在 Firebase 函數上。

編輯后端使用 cors 庫來處理這個問題。 這是代碼：

import * as express from 'express';
import * as bodyParser from 'body-parser';
import * as cors from 'cors';

import healthCheck from '../../common/utils/healthCheck';
import initFullPath from '../../common/middleware/initFullPath';
import validateFirebaseIdToken from '../../common/middleware/validateFirebaseToken';

import cortexRoutes from './routes/Cortex.routes';
import cameraRoutes from './routes/Camera.routes';

const app = express();
const main = express();

const API_VERSION = 'v1';

main.use(bodyParser.json());
main.use(bodyParser.urlencoded({ extended: true }));
main.use(cors({ origin: true }));
main.use(`/${API_VERSION}`, initFullPath(`/config/${API_VERSION}`), app);

app.route('/health').get(healthCheck);

app.use(validateFirebaseIdToken);
app.use(cortexRoutes);
app.use(cameraRoutes);

export default main;

Answer 1

我用這個解決了這類問題，

安裝cors -參考

像這樣使用它，

var express = require('express')
var cors = require('cors')
var app = express()
 
app.use(cors())
 
app.get('/....', function (req, res, next) {
  ......
})