Flutter Web Firebase托管XMLHttpRequest错误（使用本地chrome浏览器（调试）或Firefox，没有错误）

Question

我编写了Flutter Web应用程序，该应用程序通过http连接到Firebase Cloud Functions api。我在调试模式下运行时没有错误（使用flutter -d chrome运行）。但是，当我将Web应用程序部署到Firebase Hosting并在Chrome中打开结果主页时，请求http.get方法时出现以下错误：

异常：XMLHttpRequest错误

但是我打开主页在Firefox中没有错误，并且云函数返回数据。我从几个来源知道我们可以禁用Chrome安全性来摆脱此错误，但是由于普通用户可能只是认为该网站无法正常工作，因此我们不接受此错误。

在我的服务器端代码中，我使用Express并启用了CORS（因为我发现有关该错误的几个技巧与CORS有关：

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

在我的Firebase项目\ Authentication \ Signing方法\授权域中，我看到生成的抖动Web应用程序域myproject.firebaseapp.com已列出，因此被列入白名单。

我花了数小时寻找解决方案，但到目前为止还没有运气。有人可以帮忙吗？

Answer 1

好吧，别介意专家们没有答案。我找到了可行的解决方案。

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)

就是这样。现在，可以从Chrome / Firefox / Postman和Flutter应用中调用我的api。我有些沮丧，但是在一些耐心和一些文章的帮助下，我终于找到了解决方案。

我希望这种解决方案将对也在CORS问题上挣扎的人们有所帮助。