【问题标题】：Local Firebase web app tries non-local cloud functions本地 Firebase 网络应用尝试非本地云功能
【发布时间】：2020-12-16 12:24:51
【问题描述】：

总结

我正在尝试通过提供本地 Web 应用程序并调用它们来测试云功能的授权（因为模拟器无法模拟身份验证？请参阅：Docs）。我的问题是，当我单击服务页面上调用云功能的按钮时，它会尝试访问云功能：https://us-central1-MY-PROJECT.cloudfunctions.net/returnAuth 导致 Cors 问题。如何让我的 Web 应用程序调用本地云功能进行测试？我怀疑它是 index.html 内的 firebaseConfig 内部的东西吗？

我意识到我可能需要启用 Cors，因为提供云功能的端口不同。但这与我要问的问题不同。

服务

我正在通过 cmd firebase 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 帖子列表：

How to solve CORS in firebase functions enviroment?

Enabling CORS in Cloud Functions for Firebase

【问题讨论】：

模拟器确实支持 Auth。您可以进行身份验证，它可以很好地与模拟器一起使用。他们不能模拟 auth。因此，您使用的是真实服务而不是本地模拟模拟。
@Kato 是的，我选词不好，但这就是我的意思

标签： firebase google-cloud-functions cors

【解决方案1】：

简单的修复，查看文档并意识到有一个使用模拟器的功能设置。 Docs

添加

firebase.functions().useFunctionsEmulator("http://localhost:5001");

我的 index.html 脚本工作了。

【讨论】：