Увімкнення 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 пропонують додати проміжне програмне забезпечення 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'});
   })
})

Що я роблю неправильно? Буду вдячний за будь-яку допомогу в цьому.

ОНОВЛЕННЯ:

Відповідь Дуга Стівенсона допомогла. Додавання ({origin: true}) виправило проблему, я також повинен був змінити те, що 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 у верхній частині своєї функції, не вставляючи весь код у зворотний виклик. Це набагато швидше, якщо ви хочете згодом реалізувати корзи.

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

Не забувайте запускати кор, як згадувалося у вступному дописі:

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, як запропоновано krishnazden: https://stackoverflow.com/a/53845986/1293220

Знайшли спосіб увімкнути диски без імпорту будь-якої бібліотеки "cors". Він також працює Typescriptі тестує його в хромованій версії 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. Я зрозумів, що проблема - це косою косою рисою запиту для функції firebase. Експрес шукав, '/'але у мене не було останньої косої риски функції [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()функції першим ділом у функції обробника також буде працювати.

Також використовуйте функції respoSuccess / 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-голові після скрипта init 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*
    });
});

У моєму випадку помилка була викликана обмеженням доступу хмарних функцій виклику функцій. Будь ласка, додайте allUsers до виклику хмарних функцій. Будь ласка, перейдіть за посиланням . Додаткову інформацію див. У статті

Якщо жодне з інших рішень не працює, ви можете спробувати додати нижченаведену адресу на початку дзвінка, щоб увімкнути перенаправлення 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