RequireJS文本插件:无法从其他域加载HTML

rob*_*sch 2 html cors requirejs requirejs-text

我想用require.js从另一个域中获取一些html.我知道CORS政策不容易这样做.注意:到目前为止,我已经配置了Web服务器(使用Access-Control-Allow-Origin"*"和其他指令)和require.js,所有JS和CSS文件(带有require-css插件的css)都从其他域加载正如所料 - 只是获取HTML会产生问题.但是在浏览器网络协议中,我可以看到html内容甚至被加载.但是,此内容不会传递给require函数!浏览器获取内容,但require.js不提供它作为参数...

我的配置:

requirejs.config({
    baseUrl: "http://some.other.domain/",
    paths: {
        jquery:       'ext/jquery/jquery.min',
        htmlTemplate: 'test.html?', 
        siteCss:      '../css/site'
    },
    shim: {
        htmlTemplate: [
            'css!siteCss'
        ]
    },

    config: {
        text: {                
            useXhr: function (url, protocol, hostname, port) {
                return true;
            }
        }
    },
    map: {
        '*': {
            text: 'ext/require/text',
            css:  'ext/require/css.min'
        }
    }
});


require(['text!htmlTemplate'], function (htmlTemplate) {
    console.log(htmlTemplate); // prints 'undefined' into the console
});
Run Code Online (Sandbox Code Playgroud)

两个注意事项:useXhr配置来自require.js文本插件将".js"添加到文件名中,但如果它存在与否则没有区别.我?在htmlTemplate路径中添加了一个.有了这个,.js没有附加到URL,浏览器加载html内容 - 如前所述,不幸的是,没有require.js将其传递给参数htmlTemplate.

我能做什么?我已经读过,如果我使用require.js优化器,生成的文件将不再有这个问题(但是这有效...).但我需要在每次编辑时都不进行优化来开发我的JS.

更新:找到一个解决方案,但如果有人能提供"正确"的解决方案,我会很高兴.

rob*_*sch 6

我发现了实际的问题!这部分:

config: {
    text: {                
        useXhr: function (url, protocol, hostname, port) {
            return true;
        }
    }
},
Run Code Online (Sandbox Code Playgroud)

应该真的这样做.但是,我发现它根本没有被调用.而是调用默认实现.这返回了假.

为了使其工作,有必要在配置部分中使用正确的密钥,因为似乎没有为它评估映射.

所以这是从其他域获取HTML的正确配置:

requirejs.config({
    baseUrl: "http://some.other.domain/",
    paths: {
        jquery:       'ext/jquery/jquery.min',
        htmlTemplate: 'test.html', //                     // ---> removed the '?'
        siteCss:      '../css/site'
    },
    shim: {
        htmlTemplate: [
            'css!siteCss'
        ]
    },

    config: {
        'ext/require/text': {                              // ---> full path is required!!!               
            useXhr: function (url, protocol, hostname, port) {
                return true;
            }
        }
    },
    map: {
        '*': {
            text: 'ext/require/text',
            css:  'ext/require/css.min'
        }
    }
});


require(['text!htmlTemplate'], function (htmlTemplate) {
    console.log(htmlTemplate);   // now prints HTML into the console!!!
});
Run Code Online (Sandbox Code Playgroud)

哈利路亚!

这里找到了正确的提示.另一种选择可能是设置文本的路径.至少必须以某种方式设置配置,以便调用函数...