在使用Ajax读取另一个域名下的XML文件时,浏览器会因为同源策略拦截响应,控制台通常提示CORS错误。要解决这个问题,需要理解错误来源并从服务端和前端两方面配合处理。

为什么会出现CORS错误
当页面通过XMLHttpRequest或fetch请求非同源的XML资源时,浏览器会先发送请求,若服务端未返回允许的跨域头,浏览器就会丢弃响应并报告错误。常见提示包含Access-Control-Allow-Origin相关字样。
服务端如何配置CORS
最直接的办法是在提供XML文件的服务器上添加响应头。以Node.js为例:
// 简单的Node.js服务端示例,允许跨域读取xml
const http = require('http');
const fs = require('fs');
http.createServer((req, res) => {
// 设置允许跨域的响应头
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Content-Type', 'application/xml');
// 读取并返回xml文件
fs.readFile('./data.xml', (err, data) => {
if (err) {
res.statusCode = 404;
res.end('not found');
return;
}
res.end(data);
});
}).listen(3000);
前端Ajax读取XML并处理
前端使用XMLHttpRequest请求XML时,需正确解析responseXML:
// 前端发起Ajax请求读取跨域XML
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://192.168.0.1:3000/data.xml', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 将响应解析为XML文档
const xmlDoc = xhr.responseXML;
const items = xmlDoc.getElementsByTagName('item');
for (let i = 0; i < items.length; i++) {
console.log(items[i].textContent);
}
}
};
xhr.send();
使用代理避免跨域
如果不能修改XML所在服务的配置,可以在同域后端做代理转发:
# Python Flask代理示例
from flask import Flask, Response
import requests
app = Flask(__name__)
@app.route('/proxy-xml')
def proxy_xml():
# 请求真实跨域XML地址
r = requests.get('http://127.0.0.1:3000/data.xml')
return Response(r.content, mimetype='application/xml')
if __name__ == '__main__':
app.run(port=5000)
前端改为请求/proxy-xml即可同源获取内容,彻底避开CORS限制。
小结
解决Ajax跨域读取XML的CORS错误,优先让服务端加上Access-Control-Allow-Origin等头信息;受限时采用同域代理是最稳妥的备选方案。前端注意使用responseXML解析,便可顺利拿到数据。
XMLAjaxCORS跨域XMLHttpRequest修改时间:2026-07-25 00:03:25