Node.js+React项目GET请求正常POST请求报CORS错误如何解决

问题原因 #

1. 服务端CORS配置冲突且缺失预检请求处理：你同时手写了CORS响应头和使用cors中间件，重复配置可能引发冲突，且手写的CORS逻辑没有处理POST请求必须的OPTIONS预检请求，预检请求返回的响应没有正确CORS头就会触发报错。
2. 上传文件接口参数不匹配：你教师注册的POST接口使用multer要求必须携带photo文件字段，前端请求仅发送JSON数据未传文件，multer解析失败后会直接抛出错误，不会走到后续的CORS逻辑，导致响应头无Access-Control-Allow-Origin字段，被浏览器判定为CORS错误。GET请求不需要经过multer解析，所以可以正常返回。
3. 前端请求地址不完整：你前端代码里的请求url仅写了myapi.com，缺少接口路径/api/teachers/register以及协议前缀（如http:///https://），请求地址不匹配也可能引发异常。
4. 该问题和socket服务无关，socket的CORS是独立配置的，不会影响HTTP接口的跨域校验。

修复步骤 #

• 第一步：清理服务端重复的CORS配置，统一用cors中间件处理所有请求，放在所有中间件的最开头：

  const express = require("express");
  const app = express();
  const cors = require("cors");
  
  // 移到所有app.use最前面
  app.use(cors({
    origin: "*", // 生产环境建议替换为前端实际域名提升安全性
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    allowedHeaders: ["Origin", "X-Requested-With", "Content-Type", "Accept"]
  }))
  
  // 删掉原来手写的那段res.header设置CORS的代码，避免重复冲突
  // 后面保留原有bodyParser、session等其他中间件
  

• 第二步：修改前端请求逻辑，适配文件上传要求，使用FormData传输数据：
  首先在表单中新增照片上传输入框：

  {/* 放在表单原有输入框的最后，提交按钮之前 */}
  <div className="login-input">
    <FormControl>
      <Input
        id="photo"
        type="file"
        accept="image/jpeg,image/jpg,image/png"
      ></Input>
    </FormControl>
  </div>
  

  然后修改submit提交函数：

  function submit(e) {
    e.preventDefault();
    if (data.password !== data.confirmPassword) {
      alert("passwords must match");
      return;
    }
    const formData = new FormData();
    // 遍历所有表单字段加入FormData
    Object.keys(data).forEach(key => {
      formData.append(key, data[key]);
    });
    // 加入上传的照片文件
    const photoFile = document.getElementById('photo').files[0];
    formData.append('photo', photoFile);
  
    axios
      // 补全完整接口地址，本地开发示例如下，上线替换为实际API域名
      .post("http://localhost:5000/api/teachers/register", formData, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
      .then((res) => {
        console.log(res.data._id);
        history.push(`/teachers/${res.data._id}`);
      })
      .catch(err => console.error("请求错误：", err));
  }
  

• 第三步：测试验证，如果不需要上传文件的POST接口，直接发送JSON即可，不需要用FormData。

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