使用JavaScript的fetch为何无法发送自定义User-Agent请求头？

你遇到的问题是浏览器安全策略限制导致的：User-Agent属于浏览器禁止修改的请求头（forbidden header name），这类头由浏览器直接控制，即使你在fetch的headers参数中手动设置，浏览器也会忽略自定义值，强制发送默认的用户代理字符串。

可行解决办法 #

1. 开发测试场景：临时修改浏览器UA
   直接通过浏览器开发者工具设置自定义UA：

   • Chrome：打开开发者工具（F12）→ 点击左上角设备图标进入移动端调试模式 → 在顶部UA选择器中选自定义，输入目标UA字符串
   • Firefox：打开开发者工具 → 点击设置图标 → 进入"常规"选项卡 → 勾选"自定义用户代理"并输入值

2. 浏览器扩展场景：动态修改UA
   如果需要在网页代码中动态控制UA，只能通过浏览器扩展实现——扩展拥有修改请求头的特权。比如Chrome扩展可使用webRequest API拦截并修改：

   // 扩展的background.js
   chrome.webRequest.onBeforeSendHeaders.addListener(
     function(details) {
       // 遍历替换User-Agent头
       for (let i = 0; i < details.requestHeaders.length; ++i) {
         if (details.requestHeaders[i].name === 'User-Agent') {
           details.requestHeaders[i].value = 'Custom User Agent';
           break;
         }
       }
       return {requestHeaders: details.requestHeaders};
     },
     {urls: ["<all_urls>"]},
     ["blocking", "requestHeaders"]
   );
   

3. 非浏览器环境：Node.js中正常修改
   如果是在Node.js环境使用node-fetch，你的原有代码完全可以生效，因为没有浏览器的安全限制：

   const fetch = require('node-fetch');
   
   async function methodTest() {
     try {
       let transaccion = await fetch("http://localhost/assets/php/try.php", {
         method: 'GET',
         headers: {
           'User-Agent': 'Custom User Agent'
         },
       })
       console.log(await transaccion.text())
     } catch (Exc) {
       console.log(Exc)
     }
   }
   

补充说明 #

你当前的JS代码语法没有问题，但受限于浏览器的安全机制，无法覆盖User-Agent这类受保护的请求头。如果需求是前端页面动态修改UA，目前没有绕过浏览器限制的常规方法，只能依赖扩展或调试工具。

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