本地Firebase web应用程序尝试非本地云功能



摘要


我正试图通过提供本地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脚本工作。

相关内容

  • 没有找到相关文章

最新更新