为firebase可调用函数避免cors预飞

在对firebase文档和js sdk源代码进行了梳理之后,我决定如果不使用/重写私有api,这是不可能的。

我使用的解决方案是复制 JS SDK code 但是指定一个url via Firebase Hosting 所以它和我的应用程序在同一个域上。

相同的云功能,相同的应用程序代码,没有CORS飞行前

1. 创建一个普通的firebase可调用云函数
2. 将重写添加到 firebase.json

{
 ...
 "hosting": {
   ...
   "rewrites": [
      {
        "source": "myFunction",
        "function": "myFunction"
      }
   ]
 }
}

3. 而不是叫它 firebase.functions().httpsCallable('myFunction') 向您自己的新url发送post请求

const token = await firebase.auth().currentUser.getIdToken()
const response = await fetch(
  'https://myapp.web.app/myFunction',
  {
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + token
    },
    method: 'post',
    body: JSON.stringify({ data })
  }
)

现在url在您的域中,所以没有cors问题

如果你用的是 region 在服务器端,还要确保在客户端指定区域。希望能帮上忙。

firebase函数

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

网络客户端

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

由于安全原因,无法跳到预先点燃的请求

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

当满足以下所有条件时,预燃请求将跳过:

• 唯一允许的方法是:
  • 得到
  • 头
  • 柱
• 除了由用户代理自动设置的头(例如,连接、用户代理或在fetch规范中定义为禁止的头名称的任何其他头)之外,唯一允许手动设置的头是fetch spec定义为cors safelist请求头的头,这些头是:
  • 接受
  • 接受语言
  • 内容语言
  • 内容类型(但请注意下面的附加要求)
  • DPR
  • 下行链路
  • 保存数据
  • 视窗宽度
  • 宽度
• 内容类型头的唯一允许值是:
  • 应用程序/x-www-form-urlencoded
  • 多部分/表单数据
  • 文本/平原
• 没有在请求中使用的任何xmlhttprequest upload对象上注册事件侦听器;这些侦听器是使用xmlhttprequest.upload属性访问的。
• 请求中未使用ReadableStream对象。