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

Posted 2023-03-04

【中文标题】被部署在 Firebase Functions 上的快速服务器的 CORS 策略阻止，即使定义了 cors

【英文标题】：Blocked by CORS policy from an express server deployed on Firebase Functions even though cors defined

【发布时间】：2021-10-11 23:42:30

【问题描述】：

我使用 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"

【问题讨论】：

请求看起来相似吗？

@LajosArpad 抱歉回复晚了。我在 React 应用程序中使用 fetch 函数使用了我的请求。看起来像fetch("https://...cloudfunctions.net/users).then(response...)。

我的意思是您可以在浏览器的开发工具 -> 网络选项卡中看到的实际请求

@LajosArpad 我附上了来自 Dev Tools > Network 选项卡的请求 :) 我不确定这是您想要查看的内容。

拜伦，这是我需要的信息的一半。

【参考方案1】：

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

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

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

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

Access-Control-Allow-Origin: *

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

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