部署在Azure WebApp Docker容器的NestJs应用CORS请求被拒

以下是针对你遇到的问题的排查和解决步骤：

• 精准配置NestJS的CORS规则
  不要仅调用无参的app.enableCors()，明确指定前端源、凭据权限和允许的请求方法/头部，确保覆盖预检请求的需求：

  // main.ts中配置
  async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    app.enableCors({
      origin: 'https://your-frontend-azure-url.azurewebsites.net', // 替换为你的前端实际URL
      credentials: true, // 前端需携带Cookie/认证头时必须开启
      allowedHeaders: ['Content-Type', 'Authorization', 'Accept'],
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
      preflightContinue: false,
      optionsSuccessStatus: 204,
    });
    await app.listen(process.env.PORT || 3000);
  }
  bootstrap();
  

• 确认Azure WebApp的Docker端口映射
  Azure WebApp对Docker容器有反向代理，必须确保流量正确转发到NestJS服务：

  1. 你的Dockerfile中必须包含EXPOSE 3000（替换为NestJS实际监听的端口）
  2. 在Azure门户的WebApp「配置」→「应用程序设置」中添加环境变量WEBSITES_PORT，值设为NestJS监听的端口（比如3000）
  3. 重启WebApp使配置生效

• 避免双重CORS配置冲突
  对于Docker容器部署的应用，Azure门户的CORS设置通常不会生效（请求直接进入容器内的NestJS服务），建议关闭Azure门户的CORS配置，仅保留NestJS内部的CORS规则，防止头部覆盖导致的异常。

• 排查全局拦截器/守卫是否拦截OPTIONS请求
  如果你的NestJS应用有全局守卫或拦截器，检查是否误拦截了OPTIONS预检请求：

  // 示例：在全局守卫中放行OPTIONS请求
  @Injectable()
  export class AuthGuard implements CanActivate {
    canActivate(context: ExecutionContext): boolean | Promise<boolean> {
      const request = context.switchToHttp().getRequest();
      // 放行OPTIONS预检请求
      if (request.method === 'OPTIONS') {
        return true;
      }
      // 其他认证逻辑...
    }
  }
  

• 查看容器日志定位问题
  在Azure门户的WebApp「日志」→「容器日志」中查看NestJS的启动日志和请求日志，确认：

  • NestJS服务是否正常启动并监听指定端口
  • OPTIONS预检请求是否到达NestJS服务
  • 服务返回的响应头中是否包含Access-Control-Allow-Origin等CORS相关头部

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