React 和 PUT Ajax PUT 请求上的 CORS 问题

Posted 2023-03-04

【中文标题】React 和 PUT Ajax PUT 请求上的 CORS 问题

【英文标题】：Problem with CORS on React and PUT Ajax PUT request

【发布时间】：2021-10-24 15:50:33

【问题描述】：

我的应用有问题。我使用 Express/node 作为 API 并尝试使用 React 访问它，这在 Axios 上运行良好。

现在我尝试使用 DevExpress 网格组件来显示数据。获取数据工作正常，但如果我想编辑和保存，我总是会遇到 CORS 错误。

我的快递设置：

app.use(
  cors(
    origin: '*',

    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  )
);

API 如下所示：

router.put('/dataToEdit', auth, (req, res) => 
  MasterData.updateData(req, res);
);

如果我想调用并绑定到网格：

  const dataSource = createStore(
    key: 'helperboxTypeId',
    loadUrl: `$url/getAlldataToEdit`,
    insertUrl: `$url/dataToEdit`,
    updateUrl: `$url/dataToEdit`,
    deleteUrl: `$url/dataToEdit`,
    onBeforeSend: (method, ajaxOptions) => 
      ajaxOptions.headers = 
        'Content-Type': 'application/json',
        'x-auth-token': localStorage.token,
      ;
      ajaxOptions.crossDomain = true;
    ,
  );

我尝试过，我认为所有可能的设置星座，在我问这个问题之前，我在几个论坛中搜索了大约 1 天 :) 也许有人正在使用相同的组件并且可以以某种方式提供帮助。 错误是：

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

另一个解决方案可能是我在那里使用 Axios 但无法集成它。

非常感谢！

【问题讨论】：

您的代码顶部是否有关于 cors 的中间件？它先行吗？

您好，感谢您的评论帮助...我不知道为什么...找不到错误：D

【参考方案1】：

终于找到了，感谢 cmets 让我大开眼界 :)

问题是我在后端 server.js 的顶部错过了我几周前添加的一行...

app.get('/', (req, res) => res.send(text.SERVER_API_RUNNING));

如果我添加 cors 设置，它似乎只适用于我的 API 的一部分。

【参考方案2】：

您应该允许 Access-Control-Allow-Origin 如下：

app.all('/*', function (req, res, next) 
 res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 next();
);