Create React App中httpsCallable firebase的CORS错误 [英] CORS error on httpsCallable firebase in Create React App
问题描述
已解决-请在下面查看我的答案.
SOLVED - See my answer below.
可调用函数导致CORS错误,如下所示:
Callable function is causing CORS error like this:
访问地址为' https://us-central1-careerhub-a50a2.cloudfunctions.net/createUser一个>来自来源" http://localhost:3000 "已被CORS政策阻止:对预检请求的响应未通过访问控制检查:否请求中存在"Access-Control-Allow-Origin"标头资源.如果不透明的响应满足您的需求,请设置请求的模式设置为"no-cors",以在禁用CORS的情况下获取资源.
Access to fetch at 'https://us-central1-careerhub-a50a2.cloudfunctions.net/createUser' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
功能代码:
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
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"
]
}
}
即使我处于离线状态,该错误仍然存在.
This error persists even if I'm offline.
我尝试过的事情:
- 更新firebase SDK
- 在package.json中添加代理":"..."
- 使用云功能指南中的基本功能
- 删除firebase应用并删除功能并重新部署
- 添加
const cors = require('cors')({origin:true});
起作用
推荐答案
该错误原来是Google端有关IAM权限的记录较差的更改,该更改无法通过Firebase控制台明确访问.
The error turned out to be a poorly documented change on Google's end around IAM permissions, which are not clearly accessible via the Firebase console.
原因:
云功能禁止访问该功能.新创建的功能没有Cloud Functions Invoker.此更改已于2020年1月15日实施
Cloud functions were forbidding access to the function. Newly created functions did not have a Cloud Functions Invoker. This change was implemented on Jan 15, 2020
解决方案:
创建Cloud Functions Invoker并将其设置为allUsers. https://cloud.google.com/functions/docs/securing/管理访问权限
Create Cloud Functions Invoker and set to allUsers. https://cloud.google.com/functions/docs/securing/managing-access-iam
这篇关于Create React App中httpsCallable firebase的CORS错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!