如何从Firefox查询Discord知名配置端点并解决CORS错误

核心原因 #

Discord的CORS策略对跨域请求的Accept-Encoding头有严格限制：当请求携带gzip, deflate等非identity的编码值时，服务器不会返回Access-Control-Allow-Origin头，导致浏览器抛出CORS错误。而Firefox会自动覆盖你设置的Accept-Encoding: identity，添加其他编码值，触发了这个限制。

彻底解决方案 #

方案1：针对Discord单独适配请求头

既然只有Discord存在这个问题，可在请求前判断提供商，动态调整请求头：

async function getUserProfile(
  wellKnownBase: string,
  providerToken: string,
): Promise<ProviderProfile> {
  const wellKnownConfiguration = "/.well-known/openid-configuration";
  const wellKnown = `${wellKnownBase}${wellKnownConfiguration}`;

  // 针对Discord调整Accept-Encoding头
  const headers: Record<string, string> = { Accept: "application/json; charset=utf-8" };
  if (wellKnownBase.includes("discord.com")) {
    headers["Accept-Encoding"] = "identity";
    // 或者直接不设置这个头，测试下来identity更可靠
  } else {
    headers["Accept-Encoding"] = "identity"; // 保留原逻辑给其他提供商
  }

  const configurationResponse = await fetch(wellKnown, { headers });
  // 后续逻辑...
}

注：需要确保wellKnownBase是Discord的域名（如https://discord.com），避免误匹配。

方案2：通过后端代理跨域请求

前端直接发起跨域请求容易受限于第三方的CORS策略，更稳健的方式是通过自己的后端代理请求：

1. 后端代理接口示例（Node.js/Express）：

const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.get('/proxy-well-known', async (req, res) => {
  const { baseUrl } = req.query;
  if (!baseUrl) return res.status(400).send('Missing baseUrl');

  try {
    const wellKnownUrl = `${baseUrl}/.well-known/openid-configuration`;
    const response = await fetch(wellKnownUrl, {
      headers: { Accept: "application/json; charset=utf-8" }
    });
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).send('Failed to fetch configuration');
  }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

2. 前端修改请求逻辑：

async function getUserProfile(
  wellKnownBase: string,
  providerToken: string,
): Promise<ProviderProfile> {
  // 请求自己的后端代理接口
  const proxyUrl = `http://localhost:3000/proxy-well-known?baseUrl=${encodeURIComponent(wellKnownBase)}`;
  const configurationResponse = await fetch(proxyUrl);
  // 后续逻辑...
}

这个方案彻底规避了前端跨域问题，同时能统一处理所有OAuth提供商的请求，避免后续其他提供商出现类似问题。

方案3：检查Discord开发者配置（辅助验证）

登录Discord开发者平台，确认你的应用：

• 已添加正确的重定向URI（需和前端域名一致，如http://localhost:4200）
• 确认OAuth2范围包含identify或email等必要权限
  注：这个方案不一定能直接解决当前CORS问题，但能排除配置错误导致的其他异常。

临时方案优化 #

如果暂时不想修改逻辑，可将Discord的well-known配置缓存到前端或后端，避免重复请求，但建议尽快迁移到上述方案。

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