Create React App 中 httpsCallable firebase 上的 CORS 错误

Posted 2023-02-22

【中文标题】Create React App 中 httpsCallable firebase 上的 CORS 错误

【英文标题】：CORS error on httpsCallable firebase in Create React App

【发布时间】：2020-07-13 06:24:40

【问题描述】：

已解决 - 请参阅下面的答案。

可调用函数导致如下 CORS 错误：

访问获取 'https://us-central1-careerhub-a50a2.cloudfunctions.net/createUser' 来自原点“http://localhost:3000”已被 CORS 策略阻止： 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式为“no-cors”以获取禁用 CORS 的资源。

功能代码：

exports.createUser = functions.https.onCall((data, context) => 
    const email = data.email
    const password = data.password

    admin.auth().createUser(
        email: email,
        emailVerified: false,
        password: password
    ).then((res) => 
        return 
            response: res
        
    ).catch((err) => 
        return err
    )

)

客户端：

    const handleAddUser = () => 
      let pswd = passwordGen(7)
      const createUser = firebase.functions().httpsCallable('createUser');
      createUser(email: email, password: pswd).then(function(result) 
        let res = result.data
        console.log(res)
      ).catch(function(error) 
        console.log(error.code)
      )

    

package.json

  "name": "careerhub-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.0.2",
    "firebase": "^7.10.0",
    "node-sass": "^4.13.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-email-editor": "^1.0.0",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "recharts": "^2.0.0-beta.2"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": "react-app"
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

即使我处于离线状态，此错误仍然存​​在。

我尝试过的事情：

更新 Firebase SDK 在 package.json 中添加“代理”：“...” 使用云功能指南中的基本功能 删除 Firebase 应用并删除函数并重新部署 将const cors = require('cors')(origin: true); 添加到函数中

【问题讨论】：

你应该在你的 firebase 函数中添加 cors。检查这个***.com/questions/57326098/…

@DavidAgustinMelgar 忘了补充说我试过这个没有成功。再次尝试确定没有运气。

【参考方案1】：

事实证明，该错误是 Google 对 IAM 权限所做的更改记录不充分，无法通过 Firebase 控制台清楚地访问这些更改。

原因：

云功能禁止访问该功能。新创建的函数没有 Cloud Functions Invoker。此更改于 2020 年 1 月 15 日实施

解决方案：

创建 Cloud Functions Invoker 并设置为 allUsers。 https://cloud.google.com/functions/docs/securing/managing-access-iam

【讨论】：

一整天。我只是花了一整天的时间试图弄清楚这一点。感谢您回来并发布解决方案。对于偶然发现此问题的任何其他人，请将“allUsers”添加为该函数的成员，并选择“Cloud Functions Invoker”作为角色。

这对我有用，但权限设置为 allAuthenticatedUsers，角色设置为 Cloud Functions Admin。云函数 Invoker 还不够。这是正确的吗？