Flutter Web部署Firebase后调用Discord Bot API遭CORS策略拦截

嘿，我之前也踩过类似的坑，先给你理清楚问题根源和靠谱的解决方案：

首先，Discord的Bot API从设计上就不支持浏览器端直接调用——它不会返回Access-Control-Allow-Origin这类CORS响应头，所以浏览器会直接拦截跨域请求。你说本地运行正常，大概率是Flutter Web的本地调试环境自动绕过了CORS限制（比如开发服务器的特殊处理），但部署到正式环境后就会触发浏览器的同源策略检查。

至于你提到另外两个同代码应用正常，要么是它们偷偷用了后端代理（只是你没注意到配置细节），要么是之前的部署有特殊的CORS转发配置，这个应用没同步上。

下面给你两个方案，优先推荐第一个，既解决CORS问题又能保护你的Bot Token：

方案1：用Firebase Functions做中间层代理（强烈推荐） #

直接在前端代码里携带Bot Token太危险了——任何人打开浏览器开发者工具就能拿到你的Token，分分钟操控你的Bot（比如发垃圾消息、踢人甚至删除服务器）。用Firebase Functions做请求转发，既能避开CORS限制，又能把Token安全地藏在服务器端。

步骤1：创建并部署Firebase Function #

1. 先初始化Functions（如果还没做过）：

   firebase init functions
   

2. 打开functions/index.js，替换成下面的代码：

   const functions = require("firebase-functions");
   const axios = require("axios");
   
   exports.sendDiscordMessage = functions.https.onRequest(async (req, res) => {
     // 允许你的Firebase Hosting域名跨域访问
     res.set("Access-Control-Allow-Origin", "https://autonet.tk");
     res.set("Access-Control-Allow-Methods", "POST");
     res.set("Access-Control-Allow-Headers", "Content-Type");
   
     // 处理浏览器自动发送的OPTIONS预请求
     if (req.method === "OPTIONS") {
       res.status(204).send("");
       return;
     }
   
     try {
       // 从Firebase环境变量读取Token，绝对不要硬编码！
       const botToken = functions.config().discord.bot_token;
       const channelId = "689799838509957177";
       const content = req.body.content;
   
       // 转发请求到Discord API
       const discordResp = await axios.post(
         `https://discordapp.com/api/channels/${channelId}/messages`,
         { content },
         { headers: { Authorization: `Bot ${botToken}` } }
       );
   
       res.status(discordResp.status).send(discordResp.data);
     } catch (err) {
       functions.logger.error("Discord请求失败", err);
       res.status(err.response?.status || 500).send(err.message);
     }
   });
   

3. 设置环境变量存储Bot Token（避免硬编码泄露）：

   firebase functions:config:set discord.bot_token="你的Bot Token"
   

4. 部署Function：

   firebase deploy --only functions
   

步骤2：修改Flutter代码调用Function #

把原来直接调用Discord API的代码，改成调用你的Function URL（部署后Firebase控制台会给出这个地址）：

import 'package:http/http.dart' as http;

// 替换成你自己的Function部署地址
const String discordProxyUrl = "https://us-central-你的项目ID.cloudfunctions.net/sendDiscordMessage";

var resp = await http.post(
  Uri.parse(discordProxyUrl),
  body: { "content": "NEW MESSAGE: " + body }
);

方案2：检查Firebase Hosting的CORS配置（不推荐，大概率无效） #

如果你坚信另外两个应用没用到代理，可以试试在firebase.json里加CORS头配置，但提前说清楚：这个解决不了Discord API本身的CORS限制，因为CORS是由响应方（Discord）决定的，前端加的请求头没用。配置示例：

{
  "hosting": {
    // 其他现有配置...
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      }
    ]
  }
}

部署后测试，如果还是不行，赶紧回到方案1。

最后再强调一遍：绝对不要在前端代码里写死Bot Token，这相当于把Bot的控制权拱手让人，风险极高。

内容的提问来源于stack exchange，提问作者Eight Rice