Текстовый плагин RequireJS: невозможно загрузить HTML из другого домена

Я хотел бы получить html из другого домена с помощью require.js. Я знаю, что политика CORS не позволяет это легко. Примечание: я настроил веб-сервер (с Access-Control-Allow-Origin "*" и другими директивами) и require.js настолько, что все файлы JS и CSS (css с плагином require-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
});

Два примечания: useXhr Конфигурация взята из текстового плагина require.js, который добавляет ".js" к имени файла, но не имеет значения, существует он или нет. Я добавил ? путь к htmlTemplate. С этим .js не добавляется к URL-адресу, и браузер загружает html-контент - как было сказано ранее, к сожалению, без этого require.js передает его параметру htmlTemplate,

Что я могу сделать? Я читал, что если я использую оптимизатор require.js, сгенерированный файл больше не будет иметь этой проблемы (однако это работает...). Но мне нужно разрабатывать JS без оптимизации при каждом редактировании.

Обновление: найдено одно решение, но я был бы рад, если бы кто-нибудь смог предоставить "правильное" решение.

Источник

3 ответа

Решение

Я нашел актуальную проблему! Эта часть:

config: {
    text: {                
        useXhr: function (url, protocol, hostname, port) {
            return true;
        }
    }
},

должен действительно сделать это. Однако я узнал, что это не было вызвано вообще. Вместо этого была вызвана реализация по умолчанию. И это вернуло ложь.

Чтобы это работало, необходимо иметь правильные ключи в разделе конфигурации, поскольку сопоставление, по-видимому, не оценивается для него.

Так что это правильная конфигурация, которая извлекает 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!!!
});

Аллилуйя!

Нашел правильную подсказку здесь. Другим вариантом может быть установка пути для текста. По крайней мере, конфигурация должна быть настроена так, чтобы функция вызывалась...

Источник

Я получаю Нет заголовка "Access-Control-Allow-Origin" на запрошенном ресурсе. после добавления кода

config: {
        'ext/re`enter code here`quire/text': {                             required!!!               
            useXhr: function (url, protocol, hostname, port) {
                return true;
            }
        }
    },
Источник

Я думаю, что нашел решение. Документ requirejs / text:

Поэтому, если текстовый плагин определяет, что запрос ресурса находится в другом домене, он попытается получить доступ к версии ресурса ".js" с помощью тега script. Скрипт тега GET-запросы разрешены для разных доменов. Версия ресурса.js должна быть просто скриптом с вызовом define(), который возвращает строку для значения модуля.

Из-за этого я изменил конфигурацию на эту, поэтому текст больше не используется:

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'
        ]
    },
    map:     {
        '*': {
            // removed the text plugin
            css:  'ext/require/css.min'
        }
    }
    // removed the useXhr configuration for the text plugin
});


require(['htmlTemplate'], function (htmlTemplate) {
    console.log(htmlTemplate); // prints '<div>Here I am!</div>' into the console
});

Сейчас http://some.other.domain/test.html.js загружается. Содержимое test.html:

define(function () {
    return '<div>Here I am!</div>';
});

Поэтому я окружил HTML немного JS - для меня это не проблема. И сейчас htmlTemplate устанавливается на ожидаемую строку. Это больше не чистый HTML, но так как это фиксированный шаблон (т.е. не сгенерированный), он может быть приемлемым.

Источник
Другие вопросы по тегам