React使用DevExpress网格提交PUT请求到Express接口出现CORS错误如何解决

问题根因 #

你遇到的CORS错误核心原因是DevExpress的PUT/POST类修改请求会提前发送OPTIONS预检请求，你的后端配置没有正确处理该预检请求：

1. 预检请求不会携带自定义的x-auth-token头，会被你的auth中间件拦截，返回的响应未携带CORS相关头
2. 原有CORS配置未显式声明允许x-auth-token自定义头，预检校验不通过

解决方案 #

方案1：修复后端CORS配置 #

1. 调整Express的CORS配置，且确保该配置放在所有路由、auth中间件注册之前：

app.use(
  cors({
    origin: 'http://localhost:3000', // 生产环境替换为实际前端域名，支持动态匹配规则
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'x-auth-token'],
    credentials: true
  })
);

// 兜底处理所有OPTIONS预检请求，直接返回200
app.options('*', (_, res) => res.sendStatus(200));

2. 调整DevExpress数据源的请求配置，避免覆盖默认头：

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

方案2：复用Axios实现自定义数据源（最稳妥，100%兼容原有请求逻辑） #

直接用DevExpress的CustomStore替代自带的createStore，所有请求走你已经验证过的Axios实例，完全避免请求实现差异带来的问题：

import CustomStore from 'devextreme/data/custom_store';
import axios from 'axios';

const dataSource = new CustomStore({
  key: 'helperboxTypeId',
  // 加载数据
  load: async () => {
    const res = await axios.get(`${url}/getAlldataToEdit`, {
      headers: { 'x-auth-token': localStorage.token }
    });
    return res.data;
  },
  // 新增数据
  insert: async (values) => {
    const res = await axios.post(`${url}/dataToEdit`, values, {
      headers: { 'x-auth-token': localStorage.token }
    });
    return res.data;
  },
  // 更新数据
  update: async (key, values) => {
    const res = await axios.put(`${url}/dataToEdit`, { key, ...values }, {
      headers: { 'x-auth-token': localStorage.token }
    });
    return res.data;
  },
  // 删除数据
  remove: async (key) => {
    const res = await axios.delete(`${url}/dataToEdit`, {
      data: { key },
      headers: { 'x-auth-token': localStorage.token }
    });
    return res.data;
  }
});

内容的提问来源于stack exchange，提问作者Ernő László