如果第一个请求返回 400，则 Axios 第二个请求失败并出现 CORS 错误，但如果它返回 200，则工作正常答案

【问题标题】：Axios second request fails with a CORS error if the first request returns a 400 but works fine if it returns a 200如果第一个请求返回 400，则 Axios 第二个请求失败并出现 CORS 错误，但如果它返回 200，则工作正常
【发布时间】：2021-03-16 10:13:02
【问题描述】：

我有一个从 Express API 获取数据的 React 应用。我有一个更新一些数据然后重新获取数据的功能。更新成功（代码为 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 函数在获取数据后直接执行失败。 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;

【问题讨论】：

您配置 CORS 的方式似乎存在一些问题。您能否发布处理 CORS 的函数的代码？作为参考，这里是文档的 Cloud Functions CORS 配置部分，link
感谢您的回复。我已经编辑了我的帖子。
我可以看到您有 2 个快速实例，main 和 app。如果我错了，请纠正我，但我假设失败的请求由启用 CORS 的main 处理。有时，CORS 错误可能是由于代码执行中的潜在错误造成的。请参阅此SO answer。我建议您查看Cloud Function Logs 并检查当您收到 CORS 错误时是否抛出任何其他错误

标签： reactjs firebase express axios google-cloud-functions

【解决方案1】：

我用这个解决了这类问题，

安装cors - Refer

这样使用，

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

【讨论】：

该 api 已经配置了 cors。请求工作正常。只有在有错误的请求之后发出的请求才会得到 CORS 错误。