摘要
我正试图通过提供本地web应用程序并调用它们来测试云功能的授权(因为模拟器无法模拟授权?请参阅:文档(。我的问题是,当我点击调用云功能的服务页面上的按钮时,它会尝试访问云功能:https://us-central1-MY-PROJECT.cloudfunctions.net/returnAuth导致Cors问题。如何让我的web应用程序调用本地云功能进行测试?我怀疑这是index.html中firebaseConfig的内部内容?
我意识到我可能需要启用Cors,因为云功能所在的端口不同。但这与我所问的问题不同。
服务
我正在通过cmdfirebase serve
为我的云功能和index.html提供服务结果是:
i functions: Watching "/Users/plum/firebase-test/test1/functions" for Cloud Functions...
i hosting: Serving hosting files from: public
✔ hosting: Local server: http://localhost:5000
✔ functions[returnAuth]: http function initialized (http://localhost:5001/MY_PROJECT/us-central1/returnAuth).
错误
Access to fetch at 'https://us-central1-MY-PROJECT.cloudfunctions.net/returnAuth' from origin 'http://localhost:5000' 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.
Failed to load resource: net::ERR_FAILED
Code: internal Message: internal Details: undefined
简单云函数
const functions = require('firebase-functions');
const admin = require('firebase-admin');
const { exampleDataSnapshotChange } = require('firebase-functions-test/lib/providers/database');
admin.initializeApp();
exports.returnAuth = functions.https.onCall( (data, context) => {
//const uid = context.auth.uid;
//const name = context.auth.token.name || null;
const test = context.auth
return test
})
简单索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
<button id="Test1">Test 1</button>
</div>
<script>
$(document).ready(function() {
$("#Test1").on('click', function() {
var testAuth = firebase.functions().httpsCallable('returnAuth');
testAuth({text: "Testing"}).then(function(result) {
var sanitizedMessage = result.data.text;
console.log(sanitizedMessage);
})
.catch(function(error) {
var code = error.code;
var message = error.message;
var details = error.details;
console.log(`Code: ${code}t Message: ${message}t Details: ${details}`)
})
})
})
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-functions.js"></script>
<script src="/__/firebase/7.19.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "HIDDEN",
authDomain: "MY-PROJECT.firebaseapp.com",
databaseURL: "https://MY-PROJECT.firebaseio.com",
projectId: "MY-PROJECT",
storageBucket: "MY-PROJECT.appspot.com",
messagingSenderId: "SOME_NUMBER",
appId: "1:HASH:web:OTHER_HASH",
measurementId: "G-HASH"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</body>
</html>
我尝试过的SO帖子列表:
如何在firebase函数环境中解决CORS?
为Firebase 启用云功能中的CORS
简单的修复,查看了文档并意识到函数有一个使用模拟器的设置。文档
添加
firebase.functions().useFunctionsEmulator("http://localhost:5001");
到我的index.html脚本工作。