客户端执行XSLT转换规避CORS及XML转JSON实现问题咨询

错误原因 #

你出现CORS错误的核心原因是误用了XMLHttpRequest：你将完整的XML/XSL字符串传入了xhr.open()的url参数，XHR会把该内容当做网络请求地址尝试发起请求，自然会触发跨域或资源不存在错误。你的XSL支持硬编码、XML来自本地textarea输入，完全不需要发起网络请求，直接用原生DOM API解析字符串即可。

问题1：无需填写请求URL，直接解析字符串即可 #

弃用XHR请求逻辑，使用DOMParser将硬编码的XSL、XML字符串直接解析为XSLTProcessor可用的DOM对象，完全不会触发网络请求，也就不会有CORS问题。

问题2：转换后XML的JSON处理流程 #

注意：XML字符串不能直接传入JSON.parse()处理，需要先完成XML到JSON格式的转换，步骤如下：

• 用XSLTProcessor.transformToDocument()代替transformToFragment()，获取转换后的完整XML文档对象
• 用XMLSerializer将文档对象序列化为XML字符串
• 调用你原有XML转JSON的逻辑处理该字符串，得到标准JSON格式字符串后再使用JSON.parse()解析

完整可运行示例代码 #

<textarea id="xmltext" name="xmltext" rows="20" cols="80"></textarea>
<button onclick="xml2xslt()">转换</button>

<script>
// 硬编码XSL内容
const XSL_STRING = `<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>`;

function xml2xslt(){
  const parser = new DOMParser();
  // 解析XSL为DOM对象
  const xslDoc = parser.parseFromString(XSL_STRING, "text/xml");
  // 从textarea读取用户粘贴的XML内容并解析
  const inputXml = document.getElementById("xmltext").value;
  const xmlDoc = parser.parseFromString(inputXml, "text/xml");

  // 执行XSLT转换
  const xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xslDoc);
  const resultDoc = xsltProcessor.transformToDocument(xmlDoc);

  // 序列化为XML字符串
  const serializer = new XMLSerializer();
  const resultXmlStr = serializer.serializeToString(resultDoc);

  // 此处替换为你原有XML转JSON的逻辑，得到JSON字符串后即可用JSON.parse处理
  // 示例：将转换结果写回textarea
  document.getElementById("xmltext").value = resultXmlStr;
}
</script>

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