React Axios接口登录正常但注册功能报CORS策略拦截错误求助

问题根因 #

你两个请求的请求类型不一致，登录接口属于简单请求，注册接口属于非简单请求，需要额外处理预检OPTIONS请求：

• 登录接口的POST请求没有携带请求体，axios默认会设置Content-Type: text/plain，符合CORS简单请求的要求，不会触发预检OPTIONS请求，只要POST响应携带CORS头就能正常返回
• 注册接口的POST请求携带JSON格式请求体，axios默认会设置Content-Type: application/json，属于非简单请求，浏览器会先发送OPTIONS预检请求验证跨域权限，你当前的服务端没有对OPTIONS请求做CORS响应头配置，预检请求被拦截就会抛出CORS错误

修复方案 #

方案1：全局配置CORS（推荐） #

在所有路由定义之前统一添加CORS中间件，处理所有请求的跨域头，包含OPTIONS请求：

// 放在所有路由定义的最前面
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  // 预检请求直接返回200状态码
  if (req.method === "OPTIONS") {
    return res.sendStatus(200);
  }
  next();
});

配置完成后可以删掉每个接口里单独添加的res.header("Access-Control-Allow-Origin", "*")，全局已经统一生效。

方案2：单独给注册接口添加OPTIONS处理 #

如果不想做全局配置，可以单独给/register接口新增OPTIONS路由处理逻辑：

app.options("/register", (req, res) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "POST, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.sendStatus(200);
});

额外检查项 #

确认你在服务端路由之前已经配置了JSON请求体解析中间件，否则req.body会是undefined，可能引发接口内部错误：

app.use(express.json()); // 放在路由定义之前

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