React中Fetch XML文档返回空对象，如何获取并展示XML内容？

嘿，我一眼就揪出问题所在了——你设置的mode: 'no-cors'是罪魁祸首！当用这个模式发起请求时，浏览器会把响应变成不透明响应（opaque response），哪怕请求成功，你也完全没法访问响应的任何内容，response.text()自然返回空。这个模式只适合不需要读取响应的场景（比如埋点统计），完全不匹配你要获取XML内容的需求。

接下来给你一步步的解决方案：

1. 移除mode: 'no-cors' #

直接删掉这个配置项，这是解决问题的核心前提。

2. 清理无效请求头 #

你在请求里加的Access-Control-Allow-Origin、Access-Control-Allow-Methods这些是后端应该返回的响应头，前端请求里设置它们完全没用，浏览器会直接忽略。另外GET请求没有请求体，content-type头也可以删掉。

3. 修正后的完整代码 #

componentDidMount() {
  fetch("xml", {
    method: 'GET',
    headers: new Headers({
      'Accept': 'application/xml' // 保留这个，告诉服务器你需要XML格式的响应
    })
  })
  .then(response => {
    // 先判断请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    return response.text();
  })
  .then(text => {
    console.log('原始XML内容:', text);
    // 如果需要把XML转为可操作的DOM对象，用DOMParser处理
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(text, "application/xml");
    console.log('解析后的XML文档:', xmlDoc);
  })
  .catch(error => {
    console.error('获取XML出错:', error);
  });
}

4. 处理可能的CORS问题 #

移除no-cors后，你大概率会遇到CORS错误，这时候分场景处理：

• 开发环境：在React项目的package.json里添加代理配置，比如"proxy": "http://你的后端服务地址"，开发时请求会被React开发服务器代理，绕过浏览器的CORS限制。
• 生产环境：需要后端服务配置正确的CORS响应头（比如Access-Control-Allow-Origin设为你的前端域名），或者用Nginx这类反向代理转发请求。

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