XMLHttpRequest跨域请求被拦截是因服务端未配置CORS响应头,需在服务端(Nginx或后端代码)显式设置Access-Control-Allow-Origin、Access-Control-Allow-Methods等头,且XML响应须以合法XML开头并正确设置Content-Type。

XMLHttpRequest 跨域请求被浏览器拦截的典型表现
发起 XMLHttpRequest 请求 XML 文件(如 data.xml)时,控制台报错:Access to XMLHttpRequest at 'https://api.example.com/data.xml' from origin 'http://localhost:3000' has been blocked by CORS policy。这不是前端代码写错了,而是浏览器强制执行同源策略后,服务端未显式声明允许该来源访问。
服务端必须返回正确的 CORS 响应头
仅在前端加 withCredentials: true 或改用 fetch 无法绕过限制。关键在服务端响应中包含以下至少三个头:
-
Access-Control-Allow-Origin:指定允许的源,如http://localhost:3000;不可设为*同时带withCredentials: true -
Access-Control-Allow-Methods:如GET, HEAD(XML 请求通常只用 GET) -
Access-Control-Allow-Headers:若前端设置了自定义 header(如Authorization),才需声明;纯 XML GET 可省略
常见错误是只配了 Nginx 的 add_header,但没处理预检(OPTIONS)请求——XML 文件是简单请求(无自定义 header、Content-Type 是 text/xml 或 application/xml),不触发预检,所以只需确保 GET 响应含上述头即可。
Nginx 配置示例(针对静态 XML 文件)
若 XML 文件由 Nginx 直接提供(如放在 /var/www/api/data.xml),在对应 location 块中添加:
立即学习“前端免费学习笔记(深入)”;
location /data.xml {
add_header 'Access-Control-Allow-Origin' 'http://localhost:3000';
add_header 'Access-Control-Allow-Methods' 'GET, HEAD';
add_header 'Access-Control-Expose-Headers' 'Content-Length, Content-Range';
}
注意:add_header 在 Nginx 中默认不继承父级配置,必须写在能匹配到该文件的 location 内;若用正则匹配路径,确保 ^~ 或 = 精确匹配避免遗漏。
后端动态接口(如 Node.js/Express)也要显式设置
如果 XML 是后端生成并响应的(例如 GET /api/config.xml),不能依赖反向代理自动加头,必须在路由处理函数中写:
app.get('/api/config.xml', (req, res) => {
res.set({
'Access-Control-Allow-Origin': 'http://localhost:3000',
'Access-Control-Allow-Methods': 'GET',
'Content-Type': 'application/xml; charset=utf-8'
});
res.sendFile(path.join(__dirname, 'config.xml'));
});
容易被忽略的是:XML 响应体开头必须是合法 XML(如以 开始),且 Content-Type 必须明确设为 application/xml 或 text/xml;否则浏览器可能不识别为 XML,导致解析失败,掩盖 CORS 问题。










