Complemento de texto RequireJS: no se puede cargar HTML desde otro dominio

cors requirejs-text

Question

Me gustaría buscar algunos html de otro dominio con require.js. Sé que las políticas CORS no permiten esto fácilmente. Nota: He configurado el servidor web (con Access-Control-Allow-Origin "*" y otras directivas) y require.js hasta el momento en que todos los archivos JS y CSS (CSS con el complemento require-css ) se cargan desde el otro dominio como se esperaba, solo buscar HTML causa problemas. Pero en el protocolo de red del navegador puedo ver que el contenido html incluso se carga. Sin embargo, este contenido no pasa a la función requerida. El navegador obtiene el contenido, pero require.js no lo proporciona como un parámetro ...

Mi configuración:

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
});

Dos notas: la configuración de useXhr se toma del complemento de texto require.js y agrega ".js" al nombre del archivo, pero no useXhr si está allí o no. Agregué un ? a la ruta htmlTemplate. Con esto, .js no se anexa a la URL y el navegador carga el contenido html, como se dijo anteriormente, desafortunadamente, sin que require.js lo pase al parámetro htmlTemplate .

¿Que puedo hacer? He leído que si uso el optimizador require.js, el archivo generado ya no tendrá este problema (sin embargo, eso funciona ...). Pero necesito desarrollar mi JS sin optimización en cada edición.

Actualización : Encontré una solución, pero estaría contento si alguien puede proporcionar la solución ''correcta''.

Answer 1

Creo que encontré una solución. Doc de requirejs / texto :

Por lo tanto, si el complemento de texto determina que la solicitud del recurso está en otro dominio, intentará acceder a una versión ".js" del recurso utilizando una etiqueta de script. Las solicitudes GET de la etiqueta de script están permitidas en todos los dominios. La versión .js del recurso debe ser simplemente un script con una llamada a define () que devuelve una cadena para el valor del módulo.

Por eso cambié la configuración a esto, así que el texto ya no se usa:

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
});

Ahora se carga http://some.other.domain/test.html.js . El contenido de test.html es:

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

Así que rodeé el HTML con un poco de JS, no hay problema para mí. Y ahora htmlTemplate se establece en la cadena esperada. Ya no es HTML puro, pero dado que es una plantilla fija (es decir, no generada), puede ser aceptable.

Answer 2

¡He encontrado el problema real! Esta parte:

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

debería hacerlo realmente Sin embargo, descubrí que no fue llamado en absoluto. En cambio, se llamó a la implementación predeterminada. Y esto volvió falso.

Para que funcione, es necesario tener las claves correctas en la sección de configuración, ya que la asignación no parece ser evaluada para ello.

Así que esta es la configuración correcta que obtiene HTML del otro dominio:

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!!!
});

¡Aleluya!

Encontré la pista correcta aquí . Otra opción podría ser establecer la ruta para el texto . Al menos la configuración debe establecerse de alguna manera para que la función se llame ...

Answer 3

Obtengo el encabezado No ''Access-Control-Allow-Origin'' está presente en el recurso solicitado. después de agregar el código

config: {
''ext/re`enter code here`quire/text'': { required!!!
useXhr: function (url, protocol, hostname, port) {
return true;
}
}
},