如何使用 NestJs 在 firebase 函数中激活 CORS

Posted

技术标签:

【中文标题】如何使用 NestJs 在 firebase 函数中激活 CORS【英文标题】:How to active CORS in firebase functions with NestJs 【发布时间】:2021-02-07 14:26:38 【问题描述】:

我正在使用此代码在 firebase 函数中运行我的后端

// Nest Dependencies
import  NestFactory  from '@nestjs/core';
import  AppModule  from './app.module';
import  ExpressAdapter  from '@nestjs/platform-express';
// Firebase Functions Dependencies
import * as functions from 'firebase-functions';
import * as express from 'express';
// Create a express server
const server = express();
const cors = require('cors');
// Create a NestServer With the Express server
const createNestServer = async (expressInstance: any): Promise<void> => 
  const app = await NestFactory.create(
    AppModule,
    new ExpressAdapter(expressInstance),
  );
  //Inititlize it
  await app.init();
;

// Create the google cloud function with the Nest Server(express server)
export const v1 = functions.https.onRequest(async (request, response) => 
  await createNestServer(server);
  server.use(cors(origin:true))
  server(request, response);
);

但是我的 React 前端出现了这个 CORS 错误

跨域请求被阻止:同源策略不允许读取位于https://dev-api.mytingo.com/v1/user/teacher/groups/active?idTeacher=179 的远程资源。 (原因:缺少 CORS 标头“Access-Control-Allow-Origin”)。

我错过了什么? 感谢您的帮助

【问题讨论】:

【参考方案1】:

您可以尝试以下方法:

const createNestServer = async (expressInstance: any): Promise<void> => 
  const app = await NestFactory.create(
    AppModule,
    new ExpressAdapter(expressInstance),
  );
  //enable cors here
  app.enableCors();
  //Inititlize it
  await app.init();
;

【讨论】:

【参考方案2】:

引用罗曼的回答:

如果您遵循本教程:https://fireship.io/snippets/setup-nestjs-on-cloud-functions/

然后,您将拥有与 NestJS 应用程序的 main.ts 文件相对应但用于生产的 index.ts(在 src 文件夹中)文件。所以你可以按照 Roman 的建议在这个地方激活 cors。有几个选项是可能的,这里是一个例子:

export const createNestServer = async (expressInstance) => 
  const app = await NestFactory.create(
    AppModule,
    new ExpressAdapter(expressInstance),
  );

  const corsOptions = 
    methods: 'GET',
    preflightContinue: true,
    optionsSuccessStatus: 204,
    credentials: true,
    origin: ['http://localhost:8100/'],
  ;

  app.enableCors(corsOptions);

  return app.init();
;

不要忘记在重新启动之前构建!

npm run build
firebase serve --only functions
firebase deploy --only functions

【讨论】:

以上是关于如何使用 NestJs 在 firebase 函数中激活 CORS的主要内容,如果未能解决你的问题,请参考以下文章

如何在客户端中使用 Firebase Auth gmail 保护 NestJS 中的 API?

如何@Catch() NestJS 过滤器中的接口

NestJS 微服务和云部署

如何使用 NestJS 为特定模块添加路由前缀?

如何将@liaoliaots/nestjs-redis redis 连接传递给全局保护构造函数

如何在服务nestjs中模拟getMongoRepository