Heroku 服务器上的 CORS 策略问题

Posted 2023-02-27

技术标签:

【中文标题】Heroku 服务器上的 CORS 策略问题【英文标题】：CORS policy issue on Heroku Server 【发布时间】：2021-09-19 17:00:52 【问题描述】：

我制作了一个客户端-服务器应用程序。后端使用 Node、Express 和 MongoDB Atlas。

我已经安装了 CORS 并将其用作中间件，例如：

const cors = require('cors')

app.use(cors())

然后我将它部署到返回端点的heroku；喜欢：https://express-server.herokuapp.com

我在我的客户端中使用了基于 React 的端点。

我使用 axios 向服务器发出请求如：

const response = await axios.post('https://express-server.herokuapp.com/users/login' ,some data here)

这是发生错误的地方。每次我发出请求时，控制台都会弹出以下响应。

解决办法是什么？？？

【问题讨论】：

好吧，buy-where.herokuapp.com 不发送 CORS 标头 - 那是您的网站吗？也许您需要在 heroku 上重新启动您的应用程序或其他东西 【参考方案1】：

您需要支持CORS preflight 请求才能对json 数据进行POST 操作。请参阅：Why is there no preflight in CORS for POST requests with standard content-type 这意味着处理 http OPTIONS。

在你的 express 应用中这样的东西，在其他路线之前。

app.options('*', cors())

【讨论】：

【参考方案2】：

添加到 main.ts

app.enableCors(
    origin: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    credentials: true,
  );

【讨论】：

【参考方案3】：

您必须在您的服务器中定义应该接受来自哪个源请求

假设您的 localhost 在端口 3000 上运行。试试这个代码

app.use(
    cors(
        origin: "http://localhost:3000", 
        credentials: true,
    )
);

注意：凭据 true 设置为仅传递 HTTP cookie

【讨论】：

以上是关于Heroku 服务器上的 CORS 策略问题的主要内容，如果未能解决你的问题，请参考以下文章