带 Chrome 的 CORS XSL

Xen*_*nos 6 javascript xml xslt google-chrome

短的:

XSLT 应用于 XML,我想使用document(http://...), 从另一个域而不是 XSL 和原始 XML加载另一个XML。我向服务器添加了 CORS 标头,它适用于 Firefox,而不是 Chrome。为什么,以及如何解决这个问题?


完整案例:

我首先使用 html5Rocks 示例尝试了 CORS 请求。所以我有一个 html 文档,http://localhost/cors.html其中包含以下代码:

<!DOCTYPE html>


<html>
    <head>
        <meta charset="utf-8"/>
        <title>

        </title>
        <script>
            function createCORSRequest(method, url)
            {
                var xhr = new XMLHttpRequest();
                if ("withCredentials" in xhr)
                {
                    // Check if the XMLHttpRequest object has a "withCredentials" property.
                    // "withCredentials" only exists on XMLHTTPRequest2 objects.
                    xhr.open(method, url, true);
                }
                else if (typeof XDomainRequest != "undefined")
                {
                    // Otherwise, check if XDomainRequest.
                    // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
                    xhr = new XDomainRequest();
                    xhr.open(method, url);
                }
                else
                {
                    // Otherwise, CORS is not supported by the browser.
                    xhr = null;
                }
                return xhr;
            }

            function go()
            {
                console.log('go!');
                var url = 'http://cors1.localhost/cors-data.xml';
                var xhr = createCORSRequest('GET', url);
                if (!xhr)
                {
                    throw new Error('CORS not supported');
                }
                xhr.onload = function()
                {
                    var responseText = xhr.responseText;
                    var responseXml = xhr.responseXML;
                    console.log(responseXml);
                    // process the response.
                };
                xhr.onerror = function()
                {
                    console.log('There was an error!');
                };
                xhr.send();
            }
            document.addEventListener('DOMContentLoaded', go, false);
        </script>
    </head>
    <body>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

在 firefox 上工作正常:XHR 对象发送 CORS 请求,浏览器和服务器都能很好地处理它,这要归功于以下服务器的 .htaccess 文件:

Header  set Access-Control-Allow-Origin         "*"
Header  set Access-Control-Allow-Credentials    "true"
Header  set Access-Control-Allow-Methods        "OPTIONS, GET, POST"
Header  set Access-Control-Allow-Headers        "Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control"
Run Code Online (Sandbox Code Playgroud)

现在,我在 Chrome 上测试它......没问题,它也能正常工作?在两种浏览器中,控制台都会显示 XHR 响应的内容(它的responseXml),所以我假设服务器配置良好(不是吗?)。

现在,我有一个 XML 文件:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="CORS.xsl"?>

    <cors source="http://cors1.localhost/CORS-data.xml"/>
Run Code Online (Sandbox Code Playgroud)

并在其上应用了 XSLT:

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" encoding="utf-8" indent="yes"/>

    <xsl:template match="/cors">
        <xsl:variable name="cors" select="document(@source)/cors"/>
        <p>
            <xsl:text>CORS-data.xml (</xsl:text>
            <a href="{@source}">
                <xsl:value-of select="@source"/>
            </a>
            <xsl:text>): </xsl:text>
            <xsl:value-of select="$cors"/>
        </p>
    </xsl:template>
</xsl:stylesheet>
Run Code Online (Sandbox Code Playgroud)

因此 XSLT 应该加载一个外部文档 ( http://cors1.localhost/CORS-data.xml) 并显示其内容 ( <xsl:value-of select="$cors"/>)。它实际上在 Firefox 中做得很好,但在 Chrome 中却没有,控制台说:

Unsafe attempt to load URL http://cors1.localhost/CORS.xsl from frame with URL http://localhost/CORS.xml. Domains, protocols and ports must match.

和页面结果:

CORS-data.xml (http://cors1.localhost/CORS-data.xml):

之后应该有 document() 加载的 XML 内容(一个简单的“确定”),:但它是无效的。

我看到了几个关于此类问题的主题,但它们是关于file:///协议的,而不是关于http://. 我可以理解file:///出于安全原因不允许 XSLT,但我不明白

为什么 Chrome 的 CORS 可以与 javascript 的 XHR 一起使用,但无法使用 XSLT 的document()功能?以及如何解决这个问题?

小智 -1

Chrome 不允许 localhost 作为源,您应该尝试使用 --allow-file-access-from-files 和 --disable-web-security 标志启动 Chrome。