时间戳

首页 > 解决方案 > React 和 PUT Ajax PUT 请求上的 CORS 问题

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

问题描述

我的应用程序有问题。我使用 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 但无法集成它。

提前谢谢了！

标签： reactjsajaxexpresscorsdevexpress-gridcontrol

解决方案

您应该允许 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();
});

推荐阅读