时间戳

首页 > 解决方案 > 如何修复可调用函数中的 Firebase CORS 错误？

firebase - 如何修复可调用函数中的 Firebase CORS 错误？

问题描述

我对 Firebase 和 COR 有疑问，显然它无法到达端点并出现以下错误：

CORS 策略已阻止从源“https://trato.app”获取“https://europe-west2-XXX.cloudfunctions.net/fetchChatToken”的访问权限：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。服务.ts:203

POST https://europe-west2-XXX.cloudfunctions.net/fetchChatToken net::ERR_FAILED（匿名）@service.ts:203 ... ...

error.ts:66 Uncaught (in promise) Error: internal at new t (error.ts:66) at error.ts:175 at e. (service.ts:276) 在 tslib.es6.js:100 在 Object.next (tslib.es6.js:81) 在 (tslib.es6.js:71)

我还检查了开发检查器（chrome）上的网络选项卡以检查 CORS 标头是否存在，我没有看到它。

在此处输入图像描述

另外，我一直在检查 firebase 函数日志，显然甚至没有被调用，最后一行显示的是部署。

我使用它的方式是这样的：

前端侧：

const functions = firebaseApp.functions('europe-west2');
export const fetchChatToken = async () => (await functions.httpsCallable('fetchChatToken')()).data;

功能（后端）端：

const ensureAuthentication = auth => {   if (!auth) throw new HttpsError("unauthenticated", "authentication required"); };

exports.fetchChatToken = functions.region("europe-west2").https.onCall((data, context) => {
    ensureAuthentication(context.auth);
    try {
      const { AccessToken } = twilio.jwt;
      const { ChatGrant } = AccessToken;

      const grant = new ChatGrant({ 
        serviceSid: conversationsid
      });
      const token = new AccessToken(accountsid, apikey, apisecret);
      token.addGrant(grant);
      token.identity = context.auth.uid;
      return token.toJwt();
    } catch (error) {
      console.error(error);
      throw new HttpsError("internal", "internal error");
    }   });

标签： firebasegoogle-cloud-functionscorsfirebase-hosting

解决方案

不幸的是，这个 CORS 错误可能有很多原因。如果云函数返回“内部”错误消息，可能是由于区域不一致或云函数代码中的错误。我在创建新的云功能时出现此错误的清单：

  • Firestore-Project、函数和客户端初始化的不匹配区域导致 CORS 错误
  • 云函数内部的代码错误导致此错误
  • 新功能必须包含在云功能索引文件中（如果使用）
  • 云函数名称必须与客户端调用上的字符串匹配
  • 错误后在部署新功能之前删除firebase仪表板中的云功能

推荐阅读