Flutter Web Firebase Hosting XMLHttpRequest错误(使用本地chrome浏览器(

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项目\身份验证\登录方法\授权域中，我看到生成的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问题作斗争的人。