如何使用 Firebase 托管的 webapp 获取没有 CORS 标头的外部数据？

Posted 2023-03-04

【中文标题】如何使用 Firebase 托管的 webapp 获取没有 CORS 标头的外部数据？

【英文标题】：How to get external data without CORS headers with Firebase hosted webapp?

【发布时间】：2017-08-13 16:22:03

【问题描述】：

我的 Ionic2 应用托管在 Firebase 上。我需要的是从

的 API 服务获取外部数据

请求中没有“Access-Control-Allow-Origin”标头 资源

我可以通过使用 ionic.config.json 文件中的代理在本地解决它：

"proxies": [

"path":"/api",
"proxyUrl": "https://api.somwhere.com/"

]

但在将我的应用部署到 Firebase 后，我不知道如何处理这个问题。有没有可能？

【问题讨论】：

不熟悉 Firebase，但基本上，CORS 是一种浏览器实现的解决方案，用于解决浏览器对 ajax 请求的限制。因此，唯一的选择是通过代理来避免跨域请求（或者让服务器代替请求，这基本上是相同类型的解决方法）。您应该对 Firebase 允许的代理选项进行一些研究。

运气好能解决这个问题吗？我感觉需要在托管 API 服务的地方进行更改。但是如果我们无法访问或更改它怎么办？

不走运，我现在使用cors-anywhere.herokuapp.com。

【参考方案1】：

firebase.json 中的 Firebase docs have an example of setting the Access-Control-Allow-Origin 允许跨域请求字体文件。你可以这样调整：

"headers": [ 
  "source" : "**",
  "headers" : [ 
    "key" : "Access-Control-Allow-Origin",
    "value" : "*"
   ]

这将允许对所有资源的跨域请求。当然如果你想限制到特定的资源，你可以调整source的值。

【讨论】：

我们是否需要让缓存过期才能起作用。这是我的 firebase.json，但我仍然收到 CORS 错误。 “托管”：“公共”：“./src/empty”，“标题”：[“来源”：“*”，“标题”：[“键”：“访问控制- Allow-Origin", "value" : "" ] ]

请注意，CORS 错误（“来自原点 'localhost:8100' 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”）在尝试访问不在托管文件夹中的 Firebase 存储并对其进行映像时

你确实需要等待缓存过期，是的。如果可以，或者如果可以，让浏览器强制（重新）加载资源。但这不一定适用于绕过中间网络缓存/代理

我仍在试图弄清楚如何从 Firebase 存储缓存图像。我需要使用 Ajax 获取图像以获取资源，但出现上面列出的 CORS 错误

@Xerri 听起来你可能想发布一个单独的新问题

【参考方案2】：

这可能不是与 firebase 相关的问题。您的 api 需要在标头中发送 CORS。接受所有（*）或您特定的 Firebase 托管应用程序。 轻松修复用 .net 编写的 API 见链接https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

【参考方案3】：

标头集 Access-Control-Allow-Origin "*" 添加服务器 htaccess 文件解决了我的问题