React应用fetch返回移动端HTML，原生JS返回桌面端的问题求助

嘿，我仔细看了你的代码和问题描述，发现几个关键问题，咱们一步步来解决：

1. 先修复Fetch配置的低级错误 #

你代码里的fetch选项写的是header: headers，但正确的键名应该是**headers**（复数！）。这个错误直接导致你设置的User-Agent等请求头根本没被发送出去，服务器自然会用默认的UA（可能是React开发环境的UA或者浏览器的移动端标识）返回移动端页面。

另外你还有个语法错误：then(body => { console.log(body)后面没写闭合的})，这会导致代码执行报错，一起改掉：

fetch(url, { headers: headers }) // 这里改成headers（复数）
  .then(res => res.text())
  .then(body => {
    console.log(body)
  }) // 补上这个闭合括号
  .catch(function (err) {
    console.log(err);
  });

2. 用更完整的桌面端请求头模拟真实浏览器 #

有些网站会校验多个请求头，不只是User-Agent。你可以把请求头设置得更贴近真实桌面Chrome浏览器的请求：

let headers = new Headers({
  "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36",
  "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
  "Accept-Language": "en-US,en;q=0.5",
  "Accept-Encoding": "gzip, deflate, br",
  "Connection": "keep-alive",
  "Upgrade-Insecure-Requests": "1"
});

这样能最大程度让服务器认为这是桌面端的请求。

3. 绕过浏览器缓存 #

有时候浏览器会缓存之前的请求结果，哪怕你改了请求头。可以给URL加个时间戳参数，或者设置fetch的缓存策略：

// 方法一：加时间戳
const url = "https://www.zerochan.net/Re%3AZero+Kara+Hajimeru+Isekai+Seikatsu?s=fav" + "&t=" + Date.now();

// 方法二：设置fetch缓存选项
fetch(url, { 
  headers: headers,
  cache: 'no-cache' // 强制不使用缓存
})

4. 检查React开发环境的代理（如果有） #

如果你在项目里配置了代理（比如setupProxy.js），代理服务器可能会篡改你的请求头，导致User-Agent没正确传到目标服务器。可以检查代理配置，确保它保留了所有请求头。

最后，你可以打开浏览器开发者工具的Network标签，查看这个fetch请求的Request Headers，确认User-Agent确实是你设置的桌面端字符串，这样就能验证请求头是否生效了。

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