Question

我有一个Firebase Callable Cloud Function，可以在浏览器的javascript应用中调用它。

由于请求主机是... cloudfunctions.net而不是我的应用程序域，因此会导致在真正的POST请求之前发出CORS预检OPTIONS请求。

如果这是function with http trigger，我可以通过在托管配置中指定我的函数作为重写并将请求发送到托管我的应用程序的同一域来避免预检所花费的额外时间。

是否有任何方法可以避免Firebase Callable Cloud Functions的预检？也许有一种方法可以通过Firebase Hosting代理请求，例如you can with http Cloud Functions

Answer 1

对于使用 Webpack 或的 firebase local emulator 有 CORS预检问题的用户Vue （vue-cli），您可以使用代理解决问题：

my-firebase-initialize-file.js （客户端）

firebase.initializeApp(...); // your config
firebase.functions().useFunctionsEmulator('http://localhost:1234/api'); // Client url + /api

webpack.config.js 或 vue.config.js （客户端，在根上，package.json旁边）

module.exports = {
  devServer: {
    proxy: {
      "^/api": {
        target: "http://localhost:5001", // Emulator's url
        pathRewrite: {
          "^/api": ""
        },
        ws: true,
        changeOrigin: true
      }
    }
  }
};

现在每个http://localhost:1234/api将被代理到http://localhost:5001，因此您不再需要CORS飞行前检查。

当然，您需要根据情况调整这些本地网址。

Answer 2

梳理了Firebase文档和JS SDK源代码后，我决定如果不使用/覆盖私有API，这是不可能的。

我使用的解决方案是复制JS SDK code，但指定一个指向via Firebase Hosting的URL，因此它与我的应用程序位于同一域。

相同的Cloud Function，相同的应用程序代码，没有CORS的预检

Answer 3

如果您在服务器端使用特定的region，请确保同时在客户端指定区域。希望有帮助。

Firebase函数

exports.status = functions
  .runWith({
    memory: '128MB',
    timeoutSeconds: 15
  })
  .region('asia-east2')
  .https.onCall((data, context) => {
    return { message: 'OK' };
  });

Web客户端

let functions = firebase.functions('asia-east2');
let status = functions.httpsCallable('status');
status({}).then(res => console.log(res));

Answer 4

出于安全考虑，无法跳至预检请求

参考： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests

满足以下所有条件时，已跳过请求的请求：

唯一允许的方法是：
- 获取
- 头
- 开机自检
除了由用户代理自动设置的标头（例如，Connection，User-Agent或其他名称为Fetch规范中定义为“禁止标头名称”的标头）外，仅有的标头是允许手动设置的是Fetch规范定义为“ CORS安全列出的请求标头”的标头，它们是：
- 接受
- 接受语言
- 内容语言
- 内容类型（但请注意以下附加要求）
- DPR
- 下行
- 保存数据
- 视口宽度
- 宽度
Content-Type标头的唯一允许值为：
- application / x-www-form-urlencoded
- multipart / form-data
- 文本/纯文本
没有在请求中使用的任何XMLHttpRequestUpload对象上注册事件侦听器；这些可以使用XMLHttpRequest.upload属性访问。
请求中未使用ReadableStream对象。

避免针对Firebase可调用函数进行CORS预检

4 个答案: