使用react-xml-parser解析XML时前后端数据传输异常问题

后端调整：确保返回纯XML文本 #

后端已经能拿到XML数据，但要给前端返回正确格式的响应，关键是设置Content-Type并直接发送文本内容：

// Node.js 后端路由代码示例
const express = require('express');
const request = require('request');
const app = express();

app.get('/api', (req, res) => {
  request('你的外部API地址', (error, response, body) => {
    if (!error && response.statusCode === 200) {
      console.log('TEST1', body);
      // 告诉前端这是XML格式数据
      res.setHeader('Content-Type', 'application/xml');
      // 直接发送XML文本，不要返回流对象
      res.send(body);
      console.log('TEST2');
    } else {
      res.status(500).send('获取数据失败');
    }
  });
});

app.listen(3001, () => console.log('后端服务运行在3001端口'));

前端处理：把ReadableStream转为文本再解析 #

前端用fetch请求时，默认返回的是流对象，必须先转成文本才能用react-xml-parser解析：

// React前端请求代码示例
import { XMLParser } from 'react-xml-parser';

const fetchXmlData = async () => {
  try {
    const res = await fetch('http://localhost:3001/api');
    // 先把响应流转为纯文本
    const xmlText = await res.text();
    console.log('拿到的XML文本:', xmlText);
    // 再解析成JS对象
    const parser = new XMLParser();
    const xmlObj = parser.parseFromString(xmlText);
    console.log('解析后的XML对象:', xmlObj);
  } catch (err) {
    console.error('请求或解析出错:', err);
  }
};

// 调用请求函数
fetchXmlData();

解决无限加载问题 #

• 先检查前端请求是否有未处理的异常，比如Promise没加catch，导致请求一直pending；
• 开发环境下，删除React项目的node_modules/.cache目录，再重启项目，避免缓存干扰；
• 确认后端配置了CORS，否则跨域请求会被浏览器拦截，导致无限加载。可以用cors包快速配置：

// 后端引入并使用cors
const cors = require('cors');
app.use(cors()); // 允许所有域名跨域，生产环境建议配置特定域名

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