首先得给你澄清一个关键点：你看到的type: "cors"只是浏览器对跨域请求的标记，真正的错误是401 Unauthorized（未授权），不是CORS配置问题——如果是CORS失败，浏览器会直接抛出类似"No 'Access-Control-Allow-Origin' header is present on the requested resource"的错误，而不是返回401状态码。

接下来咱们一步步排查修复：

1. 修正客户端fetch代码的错误 #

你的按钮点击函数里有几个明显的问题：

• Access-Control-Allow-Origin是服务器响应头，不是客户端请求头：你在请求里加这个完全没用，浏览器会忽略这个请求头，直接删掉就行。
• Content-Type和请求体不匹配：你用JSON.stringify()生成了JSON格式的请求体，但却把Content-Type设为multipart/form-data，这会导致Express服务器无法正确解析你的请求内容，自然拿不到用户名和密码，返回401。
• 拼写错误：header应该是headers：fetch配置里的请求头字段是复数headers，你写的单数header会被忽略，等于没传任何自定义头！

修正后的代码应该是这样：

onLoginClick = async () => { 
  const headers = new Headers({ 
    "Content-Type": "application/json" // 匹配JSON格式的请求体
  }); 
  const res = await fetch("http://localhost:3333", { 
    method: "POST", 
    headers, // 修正拼写错误
    body: JSON.stringify({ username: "USER", password: "PASSWORD" }) 
  }); 
  
  // 建议在这里加一些错误处理，比如打印响应内容
  if (!res.ok) {
    const errorData = await res.json();
    console.error("登录失败:", errorData);
  }
}

2. 检查Express服务器的关键配置 #

确保你的服务器做了以下配置，否则即使前端请求正确，也会返回401：

• 正确配置cors中间件：虽然你说已经配置了，但要确认是在路由之前注册的：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  // 开发环境可以直接用cors()允许所有跨域请求，生产环境要指定具体来源
  app.use(cors());
  

• 添加JSON解析中间件：必须加这个才能让Express解析JSON格式的请求体，否则req.body会是undefined：

  app.use(express.json());
  

• 检查登录接口的认证逻辑：确认你的接口正确读取了req.body.username和req.body.password，并且验证逻辑是正确的（比如用户名密码是否和你测试的一致，有没有加密验证的问题）。

3. 单独测试Express服务器是否正常 #

你可以用Postman或者curl直接调用服务器接口，排除前端的影响：

curl -X POST http://localhost:3333 \
  -H "Content-Type: application/json" \
  -d '{"username": "USER", "password": "PASSWORD"}'

如果这个请求也返回401，那问题肯定出在Express服务器的认证逻辑上，和前端、CORS无关；如果返回成功，再回到前端排查请求细节。

内容的提问来源于stack exchange，提问作者Peter Ayello Wright