Axios请求Bitly链接返回空数据但Postman正常问题排查

嘿，我来帮你搞定这个问题！你遇到的情况其实是浏览器的安全策略在搞鬼，咱们一步步拆解：

问题根源 #

1. CORB拦截是罪魁祸首
   你看到的「Cross-Origin Read Blocking (CORB)」警告是核心原因。浏览器为了安全，会拦截跨域返回的HTML类型资源——哪怕你的请求重定向到了Stack Overflow，只要是跨域请求，浏览器就会阻止你的JS读取响应内容，所以Axios拿到的res.data是空的。而Postman是桌面工具，不受浏览器同源策略和CORB限制，所以能正常获取页面内容。

2. 无关但需要注意的Cookie警告
   那个SameSite Cookie的警告只是Chrome的未来政策提示，不是导致数据为空的直接原因，但后续如果需要处理Cookie，记得按要求设置SameSite=None和Secure属性。

解决方案 #

1. 给浏览器扩展添加跨域权限 #

浏览器扩展可以通过配置manifest.json来绕过同源限制，你需要在里面添加目标域名的访问权限：

{
  "manifest_version": 3, // 或者你使用的版本2
  "name": "你的扩展名称",
  "permissions": [
    "*://*.bit.ly/*",
    "*://*.stackoverflow.com/*"
  ],
  // 其他扩展配置项...
}

添加后，浏览器就会允许你的扩展向这些域名发送请求，不会触发CORB拦截。

2. 简化Axios请求配置 #

你之前加的几个请求头是多余的，甚至可能起反作用，调整后的代码如下：

axios({ 
  url: 'http://bit.ly/30YbIyD', 
  method: 'get', 
  maxRedirects: 5,
  withCredentials: true, 
}) 
.then((res) => { 
  console.log("Response data:", res.data);
  // 这里可以直接解析页面标题：
  const parser = new DOMParser();
  const doc = parser.parseFromString(res.data, 'text/html');
  console.log("Page title:", doc.title);
}) 
.catch((err) => { 
  console.log("Error with fetch: ", err);
});

• 去掉了Content-Type：GET请求不需要设置这个头
• 去掉了Access-Control-Allow-Origin和Access-Control-Allow-Methods：这两个是响应头，不是请求头，放在请求里毫无意义，服务器不会理会

3. 验证效果 #

配置好manifest权限后，重新加载扩展，再运行请求，应该就能正常拿到页面内容和标题了。

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