You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

本地CORS异常排查:React+NestJS项目需重启设备才能解决

本地开发中影响CORS的常见因素(React+NestJS场景)

我正在用ReactJS(Vite)、NestJS和TypeScript开发全栈网站,遇到了CORS问题。已经在后端配置CORS允许前端localhost:5173的请求,NestJS的main.ts代码如下:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.enableCors({
    origin: 'http://localhost:5173', // 指定允许的源
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', // 指定允许的HTTP方法
    credentials: true, // 启用凭证(Cookie、授权头)
  });

  await app.listen(3000);
}
bootstrap();

但出现了如下错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:3000/api/auth-client/sign-out. (Reason: CORS request did not succeed). Status code: (null).

前端调用API的函数:

const ClientAuthSignOut = async (userAccessToken: string) => {
  const response = await fetch(`${baseURL}/auth-client/sign-out`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${userAccessToken}`,
    },
  });
  return await response.json();
};

调用逻辑:

const handleLogout = async () => {
  try {
    const data = await ClientAuthSignOut(token);
    if (data.message === "signed out successfully") {
      dispatch(UNSET_AUTH_DATA());
      localStorage.removeItem("user");
    }
  } catch (error) {
    alert("Something went wrong. Please try again");
  }
};

问题一开始正常,后续突然出现,只有重启MacBook Pro M2 Pro才能解决。想了解本地环境下有哪些因素会影响CORS?


本地环境中影响CORS的常见因素

  • DNS解析与源地址不一致:localhost和127.0.0.1虽指向同一IP,但浏览器会判定为不同源。如果后端配置的是http://localhost:5173,但前端请求的后端地址是http://127.0.0.1:3000,或者baseURL混用两种地址,会直接触发CORS校验失败。另外本地DNS缓存异常也可能导致localhost解析出错。
  • 后端服务异常或端口冲突:后端服务可能因端口被占用、进程意外挂起、资源泄漏等问题,导致CORS配置未正常生效。可以用lsof -i :3000排查端口占用情况,重启服务无法解决时需检查服务运行状态。
  • 浏览器缓存或扩展干扰:浏览器缓存的旧CORS响应头可能导致校验异常;广告拦截、隐私保护类浏览器扩展也可能直接拦截跨域请求,引发CORS错误。可尝试清空浏览器缓存、禁用扩展后测试。
  • 本地网络配置变更:开启/关闭VPN、代理服务器,或本地防火墙规则调整,都可能阻断跨域请求的正常交互,导致CORS请求失败。
  • 依赖或版本兼容性问题:Node.js版本变动、NestJS相关依赖更新,可能引入CORS配置的隐性bug,导致原本正常的规则失效。可尝试锁定依赖版本,回退到之前正常的环境测试。
  • 系统级资源耗尽:Mac系统的网络连接数、文件描述符等资源耗尽时,后端服务可能无法正常处理CORS预检请求,这种情况只有重启系统才能释放资源恢复正常。

内容的提问来源于stack exchange,提问作者Abdulkader Safi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.28 07:22:47