时间戳

首页 > 解决方案 > 被部署在 Firebase Functions 上的快速服务器的 CORS 策略阻止，即使定义了 cors

firebase - 被部署在 Firebase Functions 上的快速服务器的 CORS 策略阻止，即使定义了 cors

问题描述

cors我通过设置在 Firebase Functions 上部署了我的 express 应用程序。但是，在浏览器上，控制台上打印了以下错误。

Access to fetch at 'https://....cloudfunctions.net/users/' from origin 'http://localhost:3000' 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.

在我的代码上，

...
import * as cors from 'cors'

const app = express()

app.use(cors({ origin: true })) // Set CORS properly
app.use(helmet())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.use('/', router)

app.use(errorHandler)

export const users = functions
  .region('asia-northeast3')
  .https.onRequest(app)

我找不到问题所在。连官方文档都推荐app.use(cors({ origin: true}))。我怎么解决这个问题？

====编辑====

我的请求如下所示：

GET /baggle-318109/us-central1/auth/kakao HTTP/1.1
Host: localhost:5001
Connection: keep-alive
sec-ch-ua: "Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36
Accept: */*
Origin: http://localhost:3000
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
If-None-Match: W/"d-vfAVvdILIkmIo67j2sc7s17+9M0"

标签： firebaseexpresscors

解决方案

您从 localhost:3000 向 localhost:5001 发送请求。因此，基本上您使用不同的 URL（因端口号而异）并且会引发 CORS 错误，这就是对您说

  • 您与目标的来源不同
  • 目标不允许你这样做

解决方案很简单：让目标允许你这样做。在继续之前，请阅读以下内容：https ://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors

您需要Access-Control-Allow-Origin在 localhost:5001 的响应中包含一个标题。您可以指定一个通配符

Access-Control-Allow-Origin: *

允许任何来源发送请求。您可以通过将源作为值而不是*. 在此处阅读更多信息：https ://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

更改响应标头并添加Access-Control-Allow-Origin它本身就是一个主题，并且可以针对不同的服务器以不同的方式完成。您需要知道在 localhost:5001 上请求时触发的项目所使用的服务器，并查看如何在此处添加此标头。

推荐阅读