firebase - Nest 和 HTTP 函数 - CORS

Question

我正在尝试将 Nest 与 Firebase HTTP 函数结合使用，但在从客户端调用时遇到了 CORS 错误。

这是我之前的设置:

declare const require: any
const functions = require('firebase-functions')
const cors = require('cors')({ origin: true })
const express = require('express')

const app = express()
app.use(cors)
const cb = (req, res) => res.status(200).send('success')
app.use(cb)

export default functions.https.onRequest(app)

以上工作正常(使用 allAuthenticatedUsers 设置的 Cloud Functions Invoker 角色)。

这是我使用 Nest 的新设置:

import * as functions from 'firebase-functions'
import { NestFactory } from '@nestjs/core'
import { ExpressAdapter } from '@nestjs/platform-express'
import { Api_Module } from './api.module'
import express from 'express'

const server = express()

const create_nest_server = async (express_instance: express.Express) => {
  const adaptor = new ExpressAdapter(express_instance)
  const app = await NestFactory.create(Api_Module, adaptor)
  app.enableCors({ origin: true })
  await app.init()
  return app
}


create_nest_server(server)
    .then(v => console.log('Nest Ready'))
    .catch(err => console.error('Nest broken', err))


export default functions.https.onRequest(server)

(来自 https://fireship.io/snippets/setup-nestjs-on-cloud-functions/)

这会产生 Access to fetch at 'https://us-central1-<project>.cloudfunctions.net/api-default/' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.在客户端上。

我还尝试了其他一些事情，例如:

declare const require: any
const cors = require('cors')({ origin: true })

const server = express()
server.use(cors)
// ...the rest

和:

const create_nest_server = async (express_instance: express.Express) => {
  const adaptor = new ExpressAdapter(express_instance)
  const app = await NestFactory.create(Api_Module, adaptor, {
    cors: {
      origin: true,
    }
  })

  app.enableCors()
  await app.init()
  return app
}

和:

  const nestApp = await NestFactory.create(AppModule, adapter, {
    logger: new CoreLogger(),
    cors: {
      origin: '*',
      methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
      credentials: true,
      preflightContinue: false,
      optionsSuccessStatus: 204,
    },
  })

以及使用 app.enableCors()没有任何争论。

非常感谢您的帮助。

Answer 1

假设您的客户端是 Angular 应用程序，如果您正在运行客户端的本地开发版本，则可以使用代理配置文件使您的请求看起来好像它们来自同一来源:

代理.conf.json

{
    "/api-default": {
        "target": "https://us-central1-<project>.cloudfunctions.net",
        "logLevel": "debug"
    }
}

您需要根据调用 api 的方式配置此文件，然后使用以下命令启动本地应用程序:ng serve --proxy-config proxy.conf.json

另一种方法是在您的 NestJS 响应中添加适当的 CORS 响应 header :

@Post()
@Header('Access-Control-Allow-Origin', 'http://localhost:4200')
create() {
  return 'This action adds a new cat';
}

这会告诉客户端服务器允许提供的来源。