Ошибка Firebase с CORS при работе на локальном хосте

Question

Я получаю следующую ошибку при запуске моего проекта.

Не удалось загрузить https://us -centralx-xxx.cloudfunctions.net / ххх : Ответ на предполетный запрос не проходит проверку контроля доступа: Нет Заголовок «Access-Control-Allow-Origin» присутствует в запрошенном ресурс. Происхождение 'http://localhost:3000' поэтому не допускается доступ. Ответ имеет HTTP-код состояния 500.

Прочитав много SO сообщений, я нашел следующее решение, где мне нужно добавить Access-Control-Allow-Origin, Access-Control-Allow-Methods и Access-Control-Allow-Headers

const HEADERS = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin':  'http://localhost:3000/',
    'Access-Control-Allow-Methods': 'POST',
    'Access-Control-Allow-Headers': 'X-Requested-With,content-type'
};

Однако ошибка все еще сохраняется. Как я могу решить это?

UPDATE

exports.uploadFile = functions.https.onRequest((req, res) => {
        res.setHeader("Access-Control-Allow-Origin", "*");

        res.setHeader('Access-Control-Allow-Methods', 'GET,POST,DELETE,HEAD,PUT,OPTIONS');
        res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');


    res.status(200).json({
        message: req.body
    });
});

Answer 1

import * as cors from 'cors'

const corsHandler = cors({origin: true})

export const myFunc = functions.https.onRequest(async (req: Request, res: Response) => {
   corsHandler(req, res, () => {
     // Do your work here
   })
)

Answer 2

У меня была эта проблема, и я получил такую ​​же ошибку, когда понял, что не развернул функцию в Firebase.Развертывание остановило ошибку.Так глупо, но не так сложно совершить ту же ошибку.

Answer 3

На вашем сервере Node.js установите соответствующие заголовки, чтобы разрешить контролируемые запросы CORS:

app.use((req, res, next) => {
  const origin = req.headers.origin;
  // arrayOfValidOrigins is an array of all the URL from where you want to allow 
  // to accept requests. In your case: ['http://localhost:3000'].
  // In case you want to accept requests from everywhere, set:
  // res.setHeader('Access-Control-Allow-Origin', '*');
  if (arrayOfValidOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }

  // Here allow all the HTTP methods you want
  res.header('Access-Control-Allow-Methods', 'GET,POST,DELETE,HEAD,PUT,OPTIONS');
  // Here you allow the headers for the HTTP requests to your server
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  // Method to reference to the next Node.js function in your flow
  next();
});

Другой вариант - использовать пакет CORS Express.js и настроить его в соответствии с вашими потребностями.