Fetch请求返回401但控制台显示200，且出现CORS跨域错误

看起来你遇到了跨域请求的典型问题，同时还因为浏览器的CORS机制导致状态码显示混乱，我来帮你拆解并解决：

先解释现象背后的原因 #

• 为什么实际返回401但控制台显示200？
  当跨域请求触发CORS错误时，浏览器会拦截服务器返回的真实响应，返回一个「不透明响应」——此时真实的401状态码被隐藏，控制台显示的200是浏览器的默认占位值，并不是服务器的真实返回状态。你看到的跨域错误提示才是核心问题，状态码显示异常只是这个错误的附带现象。

• 跨域错误的根源
  你发起的请求带了credentials: 'include'（会携带Cookie等凭证），这种情况下服务器必须满足严格的CORS配置要求：

  1. 必须返回Access-Control-Allow-Origin头，且值不能是通配符*，必须是请求的具体来源（也就是你的前端域名http://mdcds.ok.com:3001）
  2. 必须返回Access-Control-Allow-Credentials: true头，明确允许携带凭证的跨域请求

具体解决方案 #

1. 修复服务器端的CORS配置 #

这是最关键的一步，只有服务器配置正确，跨域请求才能正常工作。举几个常见后端的配置示例：

如果你用Node.js/Express：

const cors = require('cors');
// 针对你的前端域名配置CORS
app.use(cors({
  origin: 'http://mdcds.ok.com:3001',
  credentials: true,
  // 如果你的请求有自定义头或特殊方法，还需要添加下面的配置
  // allowedHeaders: ['Content-Type', 'Authorization'],
  // methods: ['GET', 'POST', 'OPTIONS']
}));

如果你用Java/Spring Boot：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://mdcds.ok.com:3001")
                .allowedMethods("GET", "POST", "OPTIONS")
                .allowCredentials(true);
    }
}

2. 优化前端Fetch的错误处理逻辑 #

当服务器CORS配置正确后，你就能拿到真实的401状态码了，此时可以在代码里针对性处理未授权场景：

fetch(FI_API, { credentials: 'include' })
  .then(r => {
    // 先检查响应是否成功（状态码200-299）
    if (!r.ok) {
      if (r.status === 401) {
        // 这里处理未授权逻辑，比如跳转到登录页
        console.log('当前未授权，请登录后重试');
      }
      // 抛出错误进入catch块
      throw new Error(`请求失败，状态码：${r.status}`);
    }
    return r.json();
  })
  .then(res => console.log(res))
  .catch((e) => {
    console.log(e);
  });

3. 关于浏览器提示的「不透明响应」 #

浏览器提到的设置mode: 'no-cors'只能用于不需要读取响应内容的场景（比如缓存资源），而你需要解析响应的JSON，所以这个方案完全不适用，不用考虑。

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