Flutter Web Firebase Hosting 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\\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 問題的人。