用于基于CORS预检请求的Firebase触发功能的云功能 [英] Cloud Functions for Firebase triggering function on CORS preflight request

问题描述

我有一个云功能，可以验证客户端表单提交的输入。我正在使用Cloud Functions for Firebase 很有帮助。

修复预检我改变了我的代码如下：

客户呼叫功能

删除标题完全从提取选项，而不是将内容类型设置为application / json。默认情况下，获取请求内容类型为application / x-www-form-urlencoded; charset = UTF-8。

  const validateImageFormFetchOptions = {
 method：'POST'，
 body： JSON.stringify（{
 formInputs：formInputs 
}）
} 
 
 fetch（'https://project-url.cloudfunctions.net/apiValidateImageForm'，validateImageFormFetchOptions ）
 .then（response => response.json（））
 .then（serverErrors => {console.log（serverErrors）}）; 
  

Firebase功能

显式解析请求正文，因为它现在作为文本字符串接收。

  const functions = require（'firebase-功能'）; 
 const express = require（'express'）; 
 const cors = require（'cors'）（{origin：true}）; 
 const validateImageForm = require（'./ library / validate-image-form'）; 
 
 exports.apiValidateImageForm = functions.https.onRequest（（req，res）=> {
 cors（req，res，（）=> {
 const body = JSON.parse（req.body）; 
 validateImageForm（body.formInputs，body.imageStatus）.then（（data）=> {
 res.status（200）.send（data）; 
}）; 
}）; 
}）; 
  

I have a cloud function that validates inputs from a form submission on my client. I'm using Cloud Functions for Firebase https triggers with cors express middleware.

Firebase Function

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors')({origin: true});
const validateImageForm = require('./library/validate-image-form');

exports.apiValidateImageForm = functions.https.onRequest((req, res) => {

  cors(req, res, () => {

    validateImageForm(req.body.formInputs, req.body.imageStatus).then((data) => {
      res.status(200).send(data);
    });

  });

});

Client Call To Function

const validateImageFormFetchOptions = {
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json'
   },
   method: 'POST',
   body: JSON.stringify({
     formInputs: formInputs
   })
}

fetch('https://project-url.cloudfunctions.net/apiValidateImageForm', validateImageFormFetchOptions)
 .then(response => response.json())
 .then(serverErrors => {console.log(serverErrors)});

Issue

When I call this function from my client using a fetch request I see two apiValidateImageForm triggers in the functions logs. The first is a status 204 and I assume this comes from the cors preflight request that checks the origin. The final request is status 200. I just want one function trigger when I fetch the apiValidateImageForm function. I'm concerned that over time the preflight requests that output the status 204 will add unnecessary function calls to my project quota.

Question

Is it possible to prevent firebase from triggering a function call on the preflight request? If not then is there a way to prevent the preflight request and successfully pass data to the function.

解决方案

To fix the duplicate requests 200 and 204 then change how you're client side fetch request. @sideshowbarker is right. The browser automatically does the CORS preflight OPTIONS request so this is not an issue in Cloud Functions for Firebase. This answer was helpful.

To fix the preflight I changed my code to the following:

Client Call To Function

Removed the headers from the fetch options completely rather than setting the content type as application/json. By default the fetch request content type is application/x-www-form-urlencoded; charset=UTF-8.

const validateImageFormFetchOptions = {
  method: 'POST',
  body: JSON.stringify({
   formInputs: formInputs
  })
}

fetch('https://project-url.cloudfunctions.net/apiValidateImageForm', validateImageFormFetchOptions)
  .then(response => response.json())
  .then(serverErrors => {console.log(serverErrors)});

Firebase Function

Explicitly parsed the request body because it is now received as a text string.

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors')({origin: true});
const validateImageForm = require('./library/validate-image-form');

exports.apiValidateImageForm = functions.https.onRequest((req, res) => {
  cors(req, res, () => {
    const body = JSON.parse(req.body);
    validateImageForm(body.formInputs, body.imageStatus).then((data) => {
      res.status(200).send(data);
    });
  });
});

这篇关于用于基于CORS预检请求的Firebase触发功能的云功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！