CORS:NestJs Inside a Azure WebApp Docker Container,CORS denied

ryoqjall  于 2023-06-07  发布在  Docker
关注(0)|答案(1)|浏览(121)

我目前正在尝试在Azure WebApp Docker Container上部署我的NestJs应用程序。
当我的前端(部署在Azure上)访问后端API时,我得到一个CORS错误。我添加了前端URL到CORS允许起源内的Azure门户,但仍然没有运气。
我还尝试在NestJs引导阶段启用CORS

app.enableCors()

但还是没变
预检标头不包含任何允许的原始标头。我不知道在这一点上我错过了什么。

d5vmydt9

d5vmydt91#

  • CORS要求浏览器在发出实际请求之前向服务器发送一个预处理请求(OPTIONS)。如果预检请求遇到错误,浏览器将停止未来请求并发出CORS错误。
  • 我希望您已经安装了@nestjs/common包并导入了CorsMiddleware

下面是我的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: 'https://sampleproject.com',
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    preflightContinue: false,
    optionsSuccessStatus: 204,
    credentials: true,
  };
  app.use('/api', CorsMiddleware(corsOptions));
  await app.listen(3000);
}
bootstrap();

作为临时调试措施,您可以尝试在NestJS应用程序的中间件或拦截器中显式设置CORS头。

  • 向后端API响应添加头:
import { Injectable, NestMiddleware } from '@nestjs/common';
import { Module, NestModule, MiddlewareConsumer } from '@nestjs/common';
import { CorsMiddleware } from './cors.middleware';

@Module({})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer.apply(CorsMiddleware).forRoutes('*');
  }
}

@Injectable()
export class CorsMiddleware implements NestMiddleware {
  use(req: any, res: any, next: () => void) {
    res.header('Access-Control-Allow-Origin', 'YOUR_FRONTEND_URL');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
    next();
  }
}

允许源、方法和头文件,以确保它们符合前端的要求。

相关问题