向公开API发起简单GET请求遇CORS错误，求可用XHR示例

核心原因 #

浏览器的跨域安全机制要求目标API返回Access-Control-Allow-Origin响应头，而你调用的API未配置该头，所以直接用前端XHR发起跨域请求会被拦截。修改XHR请求头（比如setRequestHeader()）完全没用，这不是请求头配置能绕过的浏览器安全规则。

最简单的可行方案：用自己的服务器做反向代理 #

如果你用Apache托管页面，这是最直接的解决方式，无需复杂工具或第三方库。

Apache配置步骤 #

在你的网站根目录创建或编辑.htaccess文件，添加以下规则：

RewriteEngine On
# 将前端请求的/api/proxy路径转发到目标API
RewriteRule ^api/proxy/(.*)$ https://example.com/myusername/$1 [P,L]

修改后的前端请求代码 #

把原来的跨域请求改成请求自己服务器的代理路径（同源请求不会触发CORS）：

var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/proxy/?key=myDevKeyHere&userid=1234", true);
xhr.onload = function() {
  console.log(xhr.responseText);
};
xhr.send();

原理：前端请求的是和页面同源的服务器路径，Apache会悄悄把请求转发到目标API，再把结果返回给前端。浏览器只识别同源请求，不会触发CORS限制。

关键安全提醒 #

别把开发密钥写在前端代码里！当前写法会让任何人通过查看源码拿到你的密钥，极易被滥用。正确做法是把密钥放在Apache代理配置中，前端仅传递userid，服务器转发时自动添加密钥：

修改后的Apache规则

RewriteEngine On
RewriteRule ^api/user/(.*)$ https://example.com/myusername/?key=myDevKeyHere&userid=$1 [P,L]

修改后的前端请求

var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/user/1234", true);
xhr.onload = function() {
  console.log(xhr.responseText);
};
xhr.send();

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