Включение CORS в облачных функциях для Firebase

В настоящее время я изучаю, как использовать новые облачные функции для Firebase, и проблема, с которой я сталкиваюсь, заключается в том, что я не могу получить доступ к функции, которую я написал через запрос AJAX. Я получаю ошибку "Нет 'Access-Control-Allow-Origin'". Вот пример функции, которую я написал:

exports.test = functions.https.onRequest((request, response) => {
  response.status(500).send({test: 'Testing functions'});
})

Функция находится в этом URL: https://us-central1-fba-shipper-140ae.cloudfunctions.net/test

Firebase docs предлагает добавить в функцию промежуточное ПО CORS, я пробовал, но у меня это не работает: https://firebase.google.com/docs/functions/http-events

Вот как я это сделал:

var cors = require('cors');    

exports.test = functions.https.onRequest((request, response) => {
   cors(request, response, () => {
     response.status(500).send({test: 'Testing functions'});
   })
})

Что я делаю не так? Буду признателен за любую помощь в этом.

ОБНОВИТЬ:

Ответ Дуга Стивенсона помог. Добавление ({происхождение: истинно}) Исправлена проблема, я также имел изменения response.status(500)в response.status(200)который я полностью пропустил в первый.

Команда Firebase предоставляет две примеры функций , демонстрирующих использование CORS:

• Сервер времени с форматированием даты
• Конечная точка HTTPS, требующая аутентификации

Во втором примере используется другой способ работы с сердечниками, чем в настоящее время.

Также рассмотрите возможность импорта следующим образом, как показано в примерах:

const cors = require('cors')({origin: true});

Вы можете установить CORS в облачной функции следующим образом

response.set('Access-Control-Allow-Origin', '*');

Нет необходимости импортировать corsпакет

Для тех, кто пытается сделать это в Typescript, это код:

import * as cors from 'cors';
const corsHandler = cors({origin: true});

export const exampleFunction= functions.https.onRequest(async (request, response) => {
       corsHandler(request, response, () => {});
       //Your code here
});

Еще одна дополнительная информация, просто для тех, кто через некоторое время погуглил: если вы используете хостинг firebase, вы также можете настроить перезапись, так что, например, URL-адрес (firebase_hosting_host) / api / myfunction перенаправляется на ( firebase_cloudfunctions_host) / функция doStuff. Таким образом, поскольку перенаправление является прозрачным и выполняется на стороне сервера, вам не придется иметь дело с корсами.

Вы можете настроить это с помощью раздела перезаписи в firebase.json:

"rewrites": [
        { "source": "/api/myFunction", "function": "doStuff" }
]

Никакие решения CORS у меня не работали ... до сих пор!

Не уверен, что кто-то еще столкнулся с той же проблемой, что и я, но я настроил CORS 5 разными способами из примеров, которые я нашел, и, похоже, ничего не работало. Я создал минимальный пример с Plunker, чтобы проверить, действительно ли это ошибка, но пример работал прекрасно. Я решил проверить журналы функций firebase (найденные в консоли firebase), чтобы узнать, может ли это мне что-нибудь сказать. У меня было несколько ошибок в коде моего узла сервера , не связанных с CORS , которые при отладке освободили меня от сообщения об ошибке CORS . Я не знаю, почему ошибки кода, не связанные с CORS, возвращают ответ об ошибке CORS, но это привело меня к неправильной кроличьей норе в течение хорошего количества часов ...

tl; dr - проверьте журналы функций firebase, если никакие решения CORS не работают, и отладьте любые ошибки, которые у вас есть

У меня есть небольшое дополнение к ответу @Andreys на его собственный вопрос.

Кажется, что вам не нужно вызывать обратный вызов в cors(req, res, cb)функции, поэтому вы можете просто вызвать модуль cors в верхней части вашей функции, не вставляя весь свой код в обратный вызов. Это будет намного быстрее, если вы захотите впоследствии реализовать cors.

exports.exampleFunction = functions.https.onRequest((request, response) => {
    cors(request, response, () => {});
    return response.send("Hello from Firebase!");
});

Не забудьте инициализировать cors, как указано во вводном сообщении:

const cors = require('cors')({origin: true});

Это может быть полезно. Я создал облачную функцию HTTP firebase с помощью экспресс (настраиваемый URL)

const express = require('express');
const bodyParser = require('body-parser');
const cors = require("cors");
const app = express();
const main = express();

app.post('/endpoint', (req, res) => {
    // code here
})

app.use(cors({ origin: true }));
main.use(cors({ origin: true }));
main.use('/api/v1', app);
main.use(bodyParser.json());
main.use(bodyParser.urlencoded({ extended: false }));

module.exports.functionName = functions.https.onRequest(main);

Убедитесь, что вы добавили разделы перезаписи

"rewrites": [
      {
        "source": "/api/v1/**",
        "function": "functionName"
      }
]

Я только что опубликовал небольшую статью об этом:

https://mhaligowski.github.io/blog/2017/03/10/cors-in-cloud-functions.html

Как правило, вы должны использовать пакет Express CORS , который требует небольшого взлома, чтобы соответствовать требованиям в функциях GCF / Firebase.

Надеюсь, это поможет!

Если есть люди вроде меня: если вы хотите вызвать облачную функцию из того же проекта, что и сама облачная функция, вы можете запустить sdk firebase и использовать метод onCall. Он сделает все за вас:

exports.newRequest = functions.https.onCall((data, context) => {
    console.log(`This is the received data: ${data}.`);
    return data;
})

Вызовите эту функцию так:

// Init the firebase SDK first    
const functions = firebase.functions();
const addMessage = functions.httpsCallable(`newRequest`);

Документы Firebase: https://firebase.google.com/docs/functions/callable

Если вы не можете запустить SDK, вот суть других предложений:

• Если вы используете хостинг firebase и размещаете в местоположении по умолчанию, выберите перезапись: https://firebase.google.com/docs/hosting/full-config#rewrites
• Или используйте CORS, как предложил Кришнадден: https://stackoverflow.com/a/53845986/1293220

Нашел способ включить cors без импорта какой-либо библиотеки cors. Он также работает Typescriptи тестировался в Chrome версии 81.0.

exports.createOrder = functions.https.onRequest((req, res) => {
// browsers like chrome need these headers to be present in response if the api is called from other than its base domain
  res.set("Access-Control-Allow-Origin", "*"); // you can also whitelist a specific domain like "http://127.0.0.1:4000"
  res.set("Access-Control-Allow-Headers", "Content-Type");

  // your code starts here

  //send response
  res.status(200).send();
});

Как бы то ни было, при переходе appв onRequest. Я понял, что проблема заключалась в косой черте в конце URL-адреса запроса для функции firebase. Express искал, '/'но у меня не было косой черты в конце функции [project-id].cloudfunctions.net/[function-name]. Ошибка CORS была ложноотрицательной. Когда я добавил косую черту в конце, я получил ожидаемый ответ.

У меня работает только этот способ, поскольку в моем запросе есть разрешение:

exports.hello = functions.https.onRequest((request, response) => {
response.set('Access-Control-Allow-Origin', '*');
response.set('Access-Control-Allow-Credentials', 'true'); // vital
if (request.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    response.set('Access-Control-Allow-Methods', 'GET');
    response.set('Access-Control-Allow-Headers', 'Content-Type');
    response.set('Access-Control-Max-Age', '3600');
    response.status(204).send('');
} else {
    const params = request.body;
    const html = 'some html';
    response.send(html)
} )};

Если вы не используете / не можете использовать плагин cors, вызов setCorsHeaders()функции первым делом в функции-обработчике также будет работать.

При ответе также используйте функции responseSuccess / Error.

const ALLOWED_ORIGINS = ["http://localhost:9090", "https://sub.example.com", "https://example.com"]


// Set CORS headers for preflight requests
function setCorsHeaders (req, res) {
  var originUrl = "http://localhost:9090"


  if(ALLOWED_ORIGINS.includes(req.headers.origin)){
    originUrl = req.headers.origin
  }

  res.set('Access-Control-Allow-Origin', originUrl);
  res.set('Access-Control-Allow-Credentials', 'true');

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET,POST','PUT','DELETE');
    res.set('Access-Control-Allow-Headers', 'Bearer, Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  }
}

function respondError (message, error, code, res) {
  var response = {
    message: message,
    error: error
  }
  res.status(code).end(JSON.stringify(response));
}


function respondSuccess (result, res) {
  var response = {
    message: "OK",
    result: result
  }
  res.status(200).end(JSON.stringify(response));
}

Если вы тестируете приложение Firebase локально, вам нужно указать функции localhostвместо облака. По умолчанию firebase serveили firebase emulators:startуказывает функции на сервер, а не на localhost, когда вы используете его в своем веб-приложении.

Добавьте ниже скрипт в заголовок html после скрипта инициализации firebase:

 <script>
      firebase.functions().useFunctionsEmulator('http://localhost:5001')
 </script> 

Обязательно удалите этот фрагмент при развертывании кода на сервере.

Изменение trueот "*"сделал трюк для меня, так это то , как он выглядит:

const cors = require('cors')({ origin: "*" })

Я пробовал этот подход, потому что, как правило, этот заголовок ответа устанавливается следующим образом:

'Access-Control-Allow-Origin', '*'

Имейте в виду, что это позволит любому домену вызывать ваши конечные точки, поэтому это НЕ безопасно.

Кроме того, вы можете прочитать больше в документации: https://github.com/expressjs/cors

Если вы не используете Express или просто хотите использовать CORS. Следующий код поможет решить

const cors = require('cors')({ origin: true, });   
exports.yourfunction = functions.https.onRequest((request, response) => {  
   return cors(request, response, () => {  
        // *Your code*
    });
});

В моем случае ошибка была вызвана ограничением доступа к облачной функции. Пожалуйста, добавьте всех пользователей в вызывающий облачные функции. Пожалуйста, поймите ссылку . Пожалуйста, обратитесь к статье для получения дополнительной информации

Если ни одно из других решений не работает, вы можете попробовать добавить указанный ниже адрес в начале вызова, чтобы включить CORS - перенаправление:

https://cors-anywhere.herokuapp.com/

Пример кода с запросом JQuery AJAX:

$.ajax({
   url: 'https://cors-anywhere.herokuapp.com/https://fir-agilan.web.app/gmail?mail=asd@gmail.com,
   type: 'GET'
});

Добавляю свой опыт. Я часами пытался понять, почему у меня возникла ошибка CORS.

Бывает, что я переименовал свою облачную функцию (самое первое, что пробовал после большого обновления).

Поэтому, когда мое приложение firebase вызывало облачную функцию с неправильным именем, оно должно было выдать ошибку 404, а не ошибку CORS.

Исправление имени облачной функции в моем приложении firebase устранило проблему.

Я заполнил отчет об этом здесь https://firebase.google.com/support/troubleshooter/report/bugs