NestJS无法启用CORS：React与NestJS跨域请求被拦截问题求助

嘿，我一眼就看到你遇到的问题里藏着一个超容易踩的坑——你的请求URL少了http://前缀！这才是导致Chrome抛出那个奇怪CORS错误的核心原因，而不是NestJS的CORS配置没生效。

先看浏览器控制台的关键错误提示：

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

当你用localhost:3500/api/v1/users/login作为请求地址时，浏览器会把localhost:当成一个自定义协议，而不是HTTP协议，这直接违反了跨域请求的协议要求，所以请求连服务器都没发出去，自然NestJS那边连请求日志都看不到。

第一步：修复请求URL #

先把React端Axios请求里的地址改成带http://的版本：

// 错误写法
axios.post('localhost:3500/api/v1/users/login', data)

// 正确写法
axios.post('http://localhost:3500/api/v1/users/login', data)

如果是用Axios的baseURL全局配置，也要补上协议：

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3500/api/v1', // 必须加http://
});

第二步：确认NestJS的CORS配置 #

虽然核心问题是URL，但还是要确保你的NestJS配置是正确的，避免后续其他跨域问题。推荐用官方的enableCors方法，在main.ts里这样写：

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

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

  const corsOptions: CorsOptions = {
    origin: ['http://localhost:3001', 'http://localhost:3000'], // 允许的前端域名
    credentials: true, // 如果需要携带cookie或认证信息，必须开启
    allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'Authorization'],
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 允许的请求方法
  };

  app.enableCors(corsOptions);

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

额外检查项 #

• 确认NestJS确实运行在3500端口，没有和其他服务冲突
• 检查React应用的运行端口是3001，和你CORS配置里的origin列表一致
• 如果之前手动加过CORS中间件，建议先移除，避免和enableCors方法冲突

这样调整之后，你的请求应该就能正常发送到NestJS服务器，CORS错误也会消失啦！

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