firebase - Flutter Web Firebase Hosting XMLHttpRequest 错误(使用本地 chrome 浏览器(调试)或使用 Firefox 均无错误)

Question

我编写了一个 Flutter Web 应用程序，它通过 http 连接到 Firebase Cloud Functions api。我在 Debug模式下运行没有错误(使用 flutter -d chrome 运行)。但是，当我将 Web 应用程序部署到 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 中，我看到生成的 flutter 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)

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

我希望这个解决方案能帮助那些也在为 CORS 问题苦苦挣扎的人。