CORS 错误。无论我尝试什么都无法修复

Question

所以我的应用程序出现 cors 错误。

这是下面的错误 - 跟随我的网络::ERR_FAILED 200（OK）

从源“???.com”访问“???.herokuapp.com/api/apod”处的 XMLHttpRequest 已被 CORS 策略阻止：请求中不存在“Access-Control-Allow-Origin”标头资源。

但是，我实际的 server.js 文件应该没问题，并且安装了必要的 cors 包，并且应用程序在部署之前使用了正确的选项。

 require('dotenv').config();
 const cors = require('cors');
 const express = require('express');
 const app = require('./app');
 const port = process.env.PORT || 10000;

 // CORS configuration
 const corsOptions = {
 origin: '*', // Allow all origins
 methods: ["GET", "POST", "PUT", "DELETE", "PATCH"], // Include all HTTP methods your API 
 uses
 allowedHeaders: ["Content-Type", "Authorization"]
 };


 // Middleware
 app.use(cors(corsOptions));
 app.use(express.json()); 

 // Start server
 app.listen(port, () => {
   console.log(`Server running on port ${port}`);
 });

顺便说一句，问我是否设置了正确的路由、环境变量是否设置完美或者我在前端和后端之间的 api 调用上是否犯了任何错误是没有意义的 -> 不，一切都应该是完美的，应用程序当使用代理在本地运行以避免任何 CORS 问题时，在部署之前运行得很好。

现在，老实说，这是我的第一个 React 节点应用程序，因为我通常使用 Angular/Java 或 Python 进行开发，并且这些语言从未遇到过任何 CORS 问题。任何帮助将不胜感激，因为我一直在......不管你信不信......现在正在寻找解决方案超过两天。

谢谢。

Answer 1

陈述的顺序

const app = require('./app');
app.use(cors(corsOptions));
app.use(express.json());

相当于

/* The next three statements are contained in `app.js`. */
const app = express();
app.get("/api/apod", ...);
app.post("/api/apod", ...);

app.use(cors(corsOptions));
app.use(express.json());

这意味着用于处理 CORS 和解析 JSON 有效负载的中间件是在处理 API 请求的中间件之后注册的。但它们必须在之前注册，否则无效。 我建议你将注册这些中间件的两条语句也移到

app.js

中。