Chrome扩展跨域请求正常，Firefox异常的原因及修复咨询

首先咱们来拆解下为什么Chrome和Firefox表现不一致，以及如何修复Firefox的CORS错误：

为什么Chrome正常，Firefox报错？ #

Chrome和Firefox对浏览器扩展内容脚本的跨域请求处理存在细微差异：

• Chrome的内容脚本在发起跨域请求时，会自动处理Origin头的传递，且在扩展已声明目标站点权限的情况下，放宽了部分CORS限制；
• Firefox则更严格遵循扩展安全规范，当内容脚本发起跨域请求时，若权限配置不全或请求不符合规范（比如手动设置Origin头），就会触发拦截。

你之前手动添加Origin头的操作是错误的——浏览器会自动为跨域请求添加合适的Origin头，手动设置这个头属于"不安全操作"，所以Chrome会直接拒绝，Firefox也不会认可这种方式。

修复Firefox错误的具体方法 #

1. 完善扩展的权限配置 #

你之前只在manifest.json里添加了*://*.tf2center.com/*的权限，但请求目标是https://tf2metrics.azurewebsites.net，必须把这个站点也加入权限列表：

"permissions": [
  "*://*.tf2center.com/*",
  "https://tf2metrics.azurewebsites.net/*"
]

扩展的内容脚本只有在permissions里声明了目标站点，才能合法发起跨域请求，Firefox对此的校验比Chrome更严格。

2. 使用Background Script代理请求 #

如果权限配置后仍有问题，可以借助扩展的Background Script中转请求——Background Script拥有更高的跨域权限，不受内容脚本的CORS限制。具体步骤：

• 在manifest.json中声明Background Script：

  "background": {
    "scripts": ["background.js"]
  }
  

• 在内容脚本中发送消息给Background Script，传递请求URL：

  // 内容脚本代码
  chrome.runtime.sendMessage({url: "https://tf2metrics.azurewebsites.net/api/users/..."}, function(response) {
    // 处理返回的数据
    console.log(response.data);
  });
  

• 在background.js中监听消息，发起请求并返回结果：

  // Background Script代码
  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    fetch(request.url)
      .then(response => response.json())
      .then(data => sendResponse({data: data}))
      .catch(error => sendResponse({error: error.message}));
    return true; // 保持消息通道开放，等待异步请求完成
  });
  

3. 验证服务器端CORS配置 #

虽然你的ASP.NET Core代码设置了AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()，但可以再确认几点：

• 确保app.UseCors()的调用顺序正确，必须在app.UseRouting()之后、app.UseAuthorization()之前；
• 测试服务器是否正确响应OPTIONS预检请求（Firefox发起复杂跨域请求前会发送OPTIONS请求），可以用curl发送OPTIONS请求到目标API，检查返回头是否包含Access-Control-Allow-Origin: *。

4. 移除手动设置Origin的代码 #

绝对不要在请求中手动添加Origin头，浏览器会自动根据当前上下文设置正确的Origin，手动设置会触发浏览器的安全拦截，这也是Chrome报错的原因。

内容的提问来源于stack exchange，提问作者Matthew Steven Monkan