Ошибка Flutter Web Firebase Hosting XMLHttpRequest (без ошибок при использовании локального браузера chrome (отладка) или Firefox) - PullRequest
Новая
       23

Ошибка Flutter Web Firebase Hosting XMLHttpRequest (без ошибок при использовании локального браузера chrome (отладка) или Firefox)

2 голосов
/ 14 марта 2020

Я написал веб-приложение Flutter, которое подключается через http к API Firebase Cloud Functions. Я работаю без ошибок в режиме отладки (запускается с использованием flutter -d chrome). Однако, когда я развернул веб-приложение на хостинге Firebase и открыл домашнюю страницу результатов в Chrome, я получаю следующую ошибку при запросе метода http.get:

Исключение: ошибка XMLHttpRequest

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

В моем коде сервера я используйте Express и включите CORS (поскольку я обнаружил несколько советов об ошибке, связанной с CORS): 

const app = require("express")();
const cors = require("cors")({ origin: true});

В моем проекте firebase \ Authentication \ Sign-in method \ Authorized domain я вижу в списке есть созданный домен веб-приложения флаттера myproject.firebaseapp.com, поэтому он занесен в белый список.

Я часами искал решения, но пока не повезло. Кто-нибудь может помочь?

1 Ответ

0 голосов
/ 15 марта 2020

Ну, не берите в голову никакой ответ от экспертов. Я нашел рабочее решение.

  1. Сначала я больше не использую пакет 'cors'.
  2. Я создал промежуточное программное обеспечение для работы с CORS. Итак, мой файл index.ts на стороне сервера выглядит так: 
const app = require("express")()
const whitelist = ['https://mysite1.com', 
                   'https://mysite2.web.app', 
                   'http://localhost', 
                   'https://us-central1-mysite2.cloudfunctions.net'] // replace with your domain whitelist

// MIDDLEWARE IF NOT USING cors package 
app.use(function (req, res, next) {
  const origin : string = req.headers.origin?? ""

  if (whitelist.indexOf(origin) !== -1) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  } else {
    res.setHeader('Access-Control-Allow-Origin', '*') // Allow all origin, may be removed if all request must be from whitelisted domain
  }

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

  res.setHeader('Access-Control-Allow-Credentials', true)
  if (req.method === "OPTIONS") {
    return res.status(200).json({})
  }
  next()
})

// api
app.get("/login", playerAuth.login)

Вот и все. Теперь мой API можно вызвать из Chrome / Firefox / Postman и из моего приложения Flutter. Я был немного разочарован, но с некоторым терпением и помощью некоторых статей я наконец нашел решение.

Я надеюсь, что это решение поможет кому-то, кто также борется с проблемой CORS.

...