网页应用读取在线TXT文件时遇XMLHttpRequest跨域及setRequestHeader错误求助

阿华AIGC实验室

2026-5-19

嘿，我来帮你搞定这两个前端请求常见的坑，都是我踩过的：

1. 先解决跨域CORS错误（No 'Access-Control-Allow-Origin' header）

这个错误本质是浏览器的同源策略在搞事情：你现在应该是直接打开本地HTML文件（用file://协议），此时请求的来源（Origin）是null，而目标服务器bahadorsaket.com没有配置允许这个来源访问的CORS响应头，所以浏览器直接拦截了请求。

给你三个可行的解决思路：

修改服务器配置（最优，如果你能控制服务器）：在目标服务器的响应中添加Access-Control-Allow-Origin头。比如：
- 用Apache的话，在.htaccess文件里加：
```
Header set Access-Control-Allow-Origin "*"
```
- 用Nginx的话，在配置里加：
```
add_header Access-Control-Allow-Origin *;
```
如果你不想允许所有来源，也可以把*换成你页面最终部署的域名，更安全。
用本地服务器跑你的网页：别直接双击打开HTML文件了，用本地服务器托管你的前端代码。比如用Node.js的http-server，或者Python的python -m http.server（Python3），这样你的页面会在http://localhost:端口运行，Origin就变成了合法的域名，再配合服务器的CORS配置就能正常访问。
用代理转发请求：如果没法改目标服务器，就用代理服务器中转请求。比如用Webpack或Vite的代理配置，把对bahadorsaket.com的请求转发到本地代理地址，这样浏览器请求的是同源地址，绕过跨域限制。

2. 再解决Failed to execute 'setRequestHeader'错误

这个错误90%的情况是你调用setRequestHeader()的时机不对——必须在open()方法调用之后，send()方法调用之前，不然XHR对象还没准备好接受请求头设置。

给你一个正确的代码示例，你可以对照着改：

// 创建XHR对象
const xhr = new XMLHttpRequest();
// 先调用open初始化请求
xhr.open('GET', 'https://bahadorsaket.com/others/ranking.txt', true);

// 【重要】如果需要设置请求头，必须放在open之后、send之前
// 比如设置接受文本类型（GET请求其实大多时候不需要这个，可按需添加）
// xhr.setRequestHeader('Accept', 'text/plain');

// 设置请求成功的回调
xhr.onload = function() {
  if (this.status >= 200 && this.status < 300) {
    console.log('读取到的文件内容:', this.responseText);
  } else {
    console.error('请求失败，状态码:', this.status);
  }
};

// 设置请求失败的回调
xhr.onerror = function() {
  console.error('网络请求出错了');
};

// 最后发送请求
xhr.send();

另外补充一句：如果是GET请求，大部分场景下不需要额外设置请求头，除非服务器有特殊要求，你可以先去掉setRequestHeader的调用试试，说不定问题就解决了。

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