时间戳

首页 > 解决方案 > Flutter Web Firebase Hosting XMLHttpRequest 报错（使用本地chrome浏览器（调试），或使用火狐没有错误）

firebase - Flutter Web Firebase Hosting XMLHttpRequest 报错（使用本地chrome浏览器（调试），或使用火狐没有错误）

问题描述

我编写了一个通过 http 连接到 Firebase Cloud Functions api 的 Flutter Web 应用程序。我在调试模式下运行没有错误（使用 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 被列出，因此它被列入白名单。

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

标签： firebasewebflutterhosting

解决方案

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

  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 问题的人。

推荐阅读