axios React + Express的CORS问题

pinkon5k 于 11个月前发布在 iOS

关注(0)|答案(1)|浏览(111)

我有一个express应用程序，它提供API。我已经将其部署到Azure。
使用postman，我可以调用API（几个不同的端点）并返回正确的数据。使用浏览器，我还可以导航到端点并在屏幕上看到来自API的数据。
然后，我部署了一个React应用程序。

Access to XMLHttpRequest at '<URL API>' from origin 'URL_FRONTEND' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

字符串
当然，这两个URL是不同的。
在我的API中，我试着这样使用cors：

const cors = require("cors");
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
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();
});

app.use(
  cors({
    origin: "URL_FRONTEND",
  })
);

型
但我仍然试图加载该网站，并得到同样的错误。我仍然可以查看在 Postman 和通过浏览器，如果直接调用。
我不明白为什么这不起作用。
我也不确定头，如果我调用的URL与 Postman ，我得到我的数据，一个200和没有访问控制头，我得到以下内容：
| 关键|值|
| --|--|
| Content-Length| 57 |
| Content-Type|应用程序/json;字符集=utf-8|
| 日期|日期和时间|
| ETag| W/“39-W6lvmEjJF5KqCGc8cN2eZHe9dyY”|
| 变化|起源|
| 技术支持|表达|
我也试着补充：

res.header("Access-Control-Allow-Origin", "*");

型
我的API中的调用。
我没办法了？
前端是react和axios。
一个额外的（可能不相关的信息）是，在Azure日志中，我可以看到前端有：

2023-12-07T19:31:22.591968270Z: [INFO]  You can now view <github repo name> in the browser.
2023-12-07T19:31:22.591973570Z: [INFO]
2023-12-07T19:31:22.591978170Z: [INFO]    http://localhost:8080

型
但我已经搜索了我的仓库，我没有localhost的示例（除了自述文件）：8080（这只是由于我没有更新readme.md）

axios

来源：https://stackoverflow.com/questions/77622793/cors-issue-with-react-express

1条答案

按热度按时间

jm81lzqq1#

在cor的配置中存在冲突，
你同时使用定制中间件和cors中间件，通常没有必要同时使用。
在您的自定义中间件中，您将cros-Control-Allow-Origin头设置为“*"，这意味着允许任何来源。但是，您还将cros中间件配置为特定的来源。您可能希望选择一种方法或另一种方法。
我建议尝试只设置cors中间件配置如下：

const express = require("express");
const cors = require("cors");
const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use(
  cors({
    origin: "URL_FRONTEND", // Replace with your actual frontend URL
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    credentials: true,
    optionsSuccessStatus: 204,
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

// Your routes and other middleware go here

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

字符串

赞(0）回复(0）举报 11个月前

我来回答

axios React + Express的CORS问题

1条答案

相关问题

热门标签

最新问答