React 18使用axios发起POST请求时遇到CORS跨域错误

核心错误点 #

• 你在请求头中添加Access-Control-Allow-Origin: *是完全无效的：Access-Control-Allow-Origin是服务端返回的响应头，不是前端可以设置的请求头，加这个配置不仅不能解决跨域，还可能额外触发预检请求异常。
• Postman能正常请求不能证明后端CORS配置正确：Postman作为接口调试工具不受浏览器同源策略约束，不会校验CORS响应头，只有浏览器环境会强制校验CORS规则。

前端侧可直接落地的操作 #

1. 修正现有请求代码 #

删除无效的CORS请求头配置，修正后的请求逻辑如下：

const getCaseDetail = async () => {
  const casedetail = {
    schemeNameDratDrtId:'1',
    casetypeId:'1',
    caseNo:'1',
    caseYear:"2020"
  }; 
  // 移除错误的headers配置
  const result = await axios.post('你的接口地址', casedetail)
  setCaseDetail(result.data.data)
}

2. 本地开发环境临时跨域方案 #

如果是用Create React App搭建的项目，直接在项目根目录package.json中新增代理配置，无需后端改动即可绕过本地开发跨域：

{
  // 其他原有配置
  "proxy": "你的接口服务完整域名，例如https://api.xxx.com"
}

配置后将axios请求地址改为接口相对路径（例如/case/detail），重启开发服务即可生效。注意该方案仅适用于本地开发环境，生产环境必须由后端正确配置CORS规则。

后端必须确认的配置（PHP服务） #

让后端开发对照以下规则排查，不要直接采信"配置没问题"的说法：

• 接口必须同时处理OPTIONS预检请求和正常POST请求：axios发送Content-Type: application/json格式的POST请求时，浏览器会先发送OPTIONS方法的预检请求，校验CORS权限，后端不能拦截OPTIONS请求，需要直接返回200/204状态码。
• 所有响应（包括OPTIONS响应）必须携带正确的CORS头：

  // 入口文件全局添加即可
  // 允许的前端源，本地开发填本地前端地址，生产填线上前端域名，带cookie时不能用*
  header('Access-Control-Allow-Origin: http://localhost:3000');
  header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
  header('Access-Control-Allow-Headers: Content-Type');
  // 单独处理预检请求
  if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
      http_response_code(204);
      exit;
  }
  

内容的提问来源于stack exchange，提问作者neil