CORS预检请求错误求助：请求头字段不被Access-Control-Allow-Headers允许

嘿，我一眼就看出问题出在哪了——你把服务器专属的响应头字段当成请求头发送了！Access-Control-Allow-Origin是服务器返回给浏览器的响应头，用来告诉浏览器“这个域名可以访问我”，根本不是前端请求需要带的头，你这属于搞反了字段的作用，才触发了这个预请求错误。

具体解决步骤 #

• 立即移除错误的请求头设置：把你代码里那行xhttp.setRequestHeader("Access-Control-Allow-Origin", ...)彻底删掉，前端GET请求完全不需要这个头。
• 确认服务器端的CORS配置：如果删掉错误头之后还是有跨域问题，得确保服务器那边配置了正确的CORS响应头：
  • 必须包含Access-Control-Allow-Origin，值可以是你的前端域名（比如http://localhost:5173），开发环境临时用*也可以（生产环境不建议这么做，不安全）。
  • 要是你的请求涉及自定义头或者非简单请求（比如POST带JSON），服务器还得配置Access-Control-Allow-Headers包含你实际使用的请求头，但你现在是GET请求，属于简单请求，只要Access-Control-Allow-Origin配置对就够了。
• 调试小技巧：用浏览器开发者工具的Network面板，查看OPTIONS预请求的响应头，确认服务器返回的Access-Control-Allow-Headers里有没有包含你实际发送的请求头（不过你现在是不该发那个头，所以先删了再说）。

修正后的代码示例 #

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "http://api.admin.wobbl.io/policy/preview?id=41", true);

// 删掉错误的setRequestHeader行，这里只保留必要的逻辑
xhttp.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // 处理成功拿到的数据
    const responseData = JSON.parse(this.responseText);
    console.log("请求成功：", responseData);
  } else {
    console.error("请求失败，状态码：", this.status);
  }
};

xhttp.onerror = function() {
  console.error("网络连接出错，请检查API地址或网络状态");
};

xhttp.send();

额外方案（如果无法修改服务器配置） #

要是你没有服务器的修改权限，那可以用反向代理来绕开跨域：

• 开发环境：用前端构建工具的代理功能，比如Webpack DevServer的proxy配置，把API请求转发到目标域名。
• 生产环境：用Nginx等服务器做反向代理，把前端域名的API请求转发到后端API地址，这样浏览器只会认为是同域请求，不会触发CORS校验。

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