Koa.js CORS跨域问题：仅Chrome可用，Firefox报DNS解析错误

这种跨浏览器的不一致问题确实挺闹心的，结合你的配置和症状，我整理了几个针对性的排查方向：

1. 清理Firefox专属DNS缓存并检查网络设置 #

虽然你已经清除了普通缓存，但Firefox的DNS缓存是独立存储的：

• 在地址栏输入 about:networking#dns，点击页面中的「清除DNS缓存」按钮，之后重新发起请求试试
• 检查Firefox是否开启了DNS over HTTPS（DoH）：在设置中搜索「DNS over HTTPS」，暂时关闭该功能，或者将localhost添加到DoH的例外列表中——DoH有时候会对本地域名的解析产生干扰

2. 验证请求URL的准确性 #

Chrome和Firefox对URL的解析规则可能存在细微差异：

• 在axios发起请求前，添加console.log(url)打印实际请求地址，复制该地址直接到Firefox地址栏访问，看是否能正常返回结果
• 检查URL是否存在隐性问题，比如多余的空格、大小写不一致（虽然localhost不区分大小写，但接口路径可能有影响）

3. 完善koa-cors的跨域配置 #

有时候看似DNS的问题，实际可能和跨域配置的细节有关：

• 尝试在cors配置中添加credentials: true，同时在axios请求中开启withCredentials: true：

  // 后端配置
  app.use(cors({ 
    origin: 'http://localhost:3000', 
    credentials: true 
  }));
  // 前端axios请求
  axios.get(url, { withCredentials: true }).then(...)
  

• 临时将origin设置为*进行测试（仅用于排查，生产环境不要这么做），确认是否是origin匹配规则导致Firefox的请求被拦截

4. 深挖Firefox的控制台与网络面板细节 #

DNS错误可能是表象，需要查看更详细的请求信息：

• 在网络面板中查看请求的完整请求头，确认Origin字段是否为http://localhost:3000，同时检查响应头中的Access-Control-Allow-Origin是否正确返回
• 查看控制台是否有CORS相关的警告或错误——有时候Firefox会把CORS拦截的请求伪装成DNS解析失败

5. 排除axios的兼容问题 #

尝试用原生fetch替代axios发起请求，看是否能正常响应：

fetch('http://localhost:8080/api/toptracks')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

如果fetch能正常工作，说明问题可能出在axios的默认配置上，可以进一步检查axios的全局设置。

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