使用Nest.js与Angular Universal SSR应用时遇CORS错误求助

你完全搞反了CORS配置的作用对象——你的Nest.js CORS配置只针对前端请求自己的Nest后端生效，但现在前端直接请求的是https://www.google.com，谷歌的服务器根本没有配置允许http://localhost:4200的跨域请求，所以浏览器才会抛出CORS错误，和你的Nest配置毫无关系。

正确解决步骤 #

1. 调整前端请求目标 #

把前端的请求地址改成你的Nest后端接口，比如：

public fetchData(): Observable<any> {
  return this.httpClient.get('/api/fetch-google-data')
}

2. 在Nest后端做请求转发 #

用Nest的HttpService（需先导入HttpModule）代理请求到谷歌，后端之间的HTTP请求不受浏览器CORS限制：
首先在AppModule中导入HttpModule：

import { Module } from '@nestjs/common';
import { HttpModule } from '@nestjs/axios';
import { AppController } from './app.controller';

@Module({
  imports: [HttpModule],
  controllers: [AppController],
})
export class AppModule {}

然后在Controller里实现转发接口：

import { Controller, Get } from '@nestjs/common';
import { HttpService } from '@nestjs/axios';
import { map } from 'rxjs/operators';

@Controller('api')
export class AppController {
  constructor(private readonly httpService: HttpService) {}

  @Get('fetch-google-data')
  fetchGoogleData() {
    return this.httpService.get('https://www.google.com').pipe(
      map(response => response.data)
    );
  }
}

3. 修正Nest的CORS配置 #

确保你的Nest CORS配置适配前端请求后端的场景，比如：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: 'http://localhost:4200', // 明确允许前端的源
    methods: ['GET', 'POST', 'OPTIONS', 'DELETE', 'PUT'], // 注意这里是数组独立元素，不是逗号分隔的字符串
    credentials: true, // 若需携带Cookie则开启
  });
  app.setGlobalPrefix('api');
  await app.listen(process.env['PORT'] || 4000);
}

补充说明 #

• 浏览器的CORS限制仅针对前端发起的跨域请求，后端之间的请求无此限制，通过后端代理是解决第三方接口跨域问题的标准方案。
• 你之前的CORS配置中methods写法错误，多个方法写在单个字符串里无效，必须拆分为数组独立元素。

内容的提问来源于stack exchange，提问作者Mattias Törnqvist