mostrar - llamar funcion javascript html sin evento
Cargando punto final entre dominios con jQuery AJAX (8)
jQuery Ajax Notes
- Debido a las restricciones de seguridad del navegador, la mayoría de las solicitudes de Ajax están sujetas a la misma política de origen ; la solicitud no puede recuperar datos de un dominio, subdominio, puerto o protocolo diferente.
- Las solicitudes de script y JSONP no están sujetas a las mismas restricciones de política de origen.
Hay algunas formas de superar la barrera de dominios cruzados :
- Alternativas de CORS Proxy
- Formas de eludir la política del mismo origen
- Rompiendo la barrera del dominio cruzado
Existen algunos complementos que ayudan con las solicitudes entre dominios :
¡Aviso!
La mejor manera de superar este problema es creando su propio proxy en el back-end, de modo que su proxy apunte a los servicios en otros dominios, porque en el back-end no existe la misma restricción de política de origen . Pero si no puede hacer eso en back-end, preste atención a los siguientes consejos.
¡Advertencia!El uso de proxies de terceros no es una práctica segura, ya que pueden realizar un seguimiento de sus datos, por lo que se pueden usar con información pública, pero nunca con datos privados.
Los ejemplos de código que se muestran a continuación usan jQuery.get() y jQuery.getJSON() , ambos son métodos abreviados de jQuery.ajax()CORS en cualquier lugar
CORS Anywhere es un proxy node.js que agrega encabezados CORS a la solicitud de proxy.
Para usar la API, simplemente prefija la URL con la URL de la API. (Compatible con https : ver el repositorio de Github )
Si desea habilitar automáticamente las solicitudes entre dominios cuando sea necesario, use el siguiente fragmento de código:
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === ''http:'' ? ''http:'' : ''https:'');
options.url = http + ''//cors-anywhere.herokuapp.com/'' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.get(
''http://en.wikipedia.org/wiki/Cross-origin_resource_sharing'',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Cualquier origen
Sea cual sea el origen, es un acceso jsonp de dominio cruzado . Esta es una alternativa de código abierto para anyorigin.com .
Para buscar los datos de google.com, puede usar este fragmento de código:
// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options:
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
scriptCharset: "utf-8", //or "ISO-8859-1"
contentType: "application/json; charset=utf-8"
});
$.getJSON(''http://whateverorigin.org/get?url='' +
encodeURIComponent(''http://google.com'') + ''&callback=?'',
function (data) {
console.log("> ", data);
//If the expected response is text/plain
$("#viewer").html(data.contents);
//If the expected response is JSON
//var response = $.parseJSON(data.contents);
});
CORS Proxy
CORS Proxy es un proxy node.js simple para habilitar la solicitud CORS para cualquier sitio web. Permite que el código de JavaScript en su sitio acceda a recursos en otros dominios que normalmente se bloquearían debido a la política de origen mismo.
¿Como funciona? CORS Proxy aprovecha el uso compartido de recursos de origen cruzado, que es una característica que se agregó junto con HTML 5. Los servidores pueden especificar que desean que los navegadores permitan que otros sitios web soliciten los recursos que alojan. CORS Proxy es simplemente un proxy HTTP que agrega un encabezado a las respuestas que dicen "cualquiera puede solicitar esto".
Esta es otra forma de lograr el objetivo (ver www.corsproxy.com ). Todo lo que tienes que hacer es quitar http: // y www. de la URL que se está aproximando, y antepone la URL con www.corsproxy.com/
$.get(
''http://www.corsproxy.com/'' +
''en.wikipedia.org/wiki/Cross-origin_resource_sharing'',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Navegador proxy CORS
Recientemente encontré este, se trata de varias utilidades de Cross Origin Remote Sharing orientadas a la seguridad. Pero es una caja negra con Flash como back-end.
Puedes verlo en acción aquí: CORS proxy browser
Obtenga el código fuente en GitHub: koto/cors-proxy-browser
Estoy intentando cargar una página HTML entre dominios utilizando AJAX, pero a menos que el tipo de datos sea "jsonp" no puedo obtener una respuesta. Sin embargo, usando jsonp, el navegador espera un tipo de script mime pero está recibiendo "text / html".
Mi código para la solicitud es:
$.ajax({
type: "GET",
url: "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute",
dataType: "jsonp",
}).success( function( data ) {
$( ''div.ajax-field'' ).html( data );
});
¿Hay alguna forma de evitar el uso de jsonp para la solicitud? Ya he intentado usar el parámetro crossDomain pero no funcionó.
Si no, ¿hay alguna forma de recibir el contenido html en jsonp? Actualmente, la consola dice "inesperado <" en la respuesta de jsonp.
Estoy publicando esto en caso de que alguien se enfrente al mismo problema que estoy enfrentando en este momento. Tengo una impresora térmica Zebra, equipada con el servidor de impresión ZebraNet, que ofrece una interfaz de usuario basada en HTML para editar múltiples configuraciones, ver el estado actual de la impresora, etc. Necesito obtener el estado de la impresora, que se muestra en una de esas páginas html, ofrecidas por el servidor ZebraNet y, por ejemplo, alert () un mensaje para el usuario en el navegador. Esto significa que primero tengo que obtener esa página html en Javascript. Aunque la impresora está dentro de la LAN de la PC del usuario, esa Política de Mismo Origen aún se mantiene firmemente en mi camino. Intenté JSONP, pero el servidor devuelve html y no he encontrado una manera de modificar su funcionalidad (si pudiera, ya habría configurado el encabezado mágico Access-control-allow-origin: *). Así que decidí escribir una pequeña aplicación de consola en C #. Tiene que ejecutarse como administrador para que funcione correctamente; de lo contrario, trolls: D una excepción. Aquí hay un código:
// Create a listener.
HttpListener listener = new HttpListener();
// Add the prefixes.
//foreach (string s in prefixes)
//{
// listener.Prefixes.Add(s);
//}
listener.Prefixes.Add("http://*:1234/"); // accept connections from everywhere,
//because the printer is accessible only within the LAN (no portforwarding)
listener.Start();
Console.WriteLine("Listening...");
// Note: The GetContext method blocks while waiting for a request.
HttpListenerContext context;
string urlForRequest = "";
HttpWebRequest requestForPage = null;
HttpWebResponse responseForPage = null;
string responseForPageAsString = "";
while (true)
{
context = listener.GetContext();
HttpListenerRequest request = context.Request;
urlForRequest = request.RawUrl.Substring(1, request.RawUrl.Length - 1); // remove the slash, which separates the portNumber from the arg sent
Console.WriteLine(urlForRequest);
//Request for the html page:
requestForPage = (HttpWebRequest)WebRequest.Create(urlForRequest);
responseForPage = (HttpWebResponse)requestForPage.GetResponse();
responseForPageAsString = new StreamReader(responseForPage.GetResponseStream()).ReadToEnd();
// Obtain a response object.
HttpListenerResponse response = context.Response;
// Send back the response.
byte[] buffer = System.Text.Encoding.UTF8.GetBytes(responseForPageAsString);
// Get a response stream and write the response to it.
response.ContentLength64 = buffer.Length;
response.AddHeader("Access-Control-Allow-Origin", "*"); // the magic header in action ;-D
System.IO.Stream output = response.OutputStream;
output.Write(buffer, 0, buffer.Length);
// You must close the output stream.
output.Close();
//listener.Stop();
Todo lo que el usuario debe hacer es ejecutar esa aplicación de consola como administrador. Sé que es demasiado ... frustrante y complicado, pero es una especie de solución al problema de la Política de dominio en caso de que no pueda modificar el servidor de ninguna manera.
editar: desde js hago una simple llamada ajax:
$.ajax({
type: ''POST'',
url: ''http://LAN_IP:1234/http://google.com'',
success: function (data) {
console.log("Success: " + data);
},
error: function (e) {
alert("Error: " + e);
console.log("Error: " + e);
}
});
El html de la página solicitada se devuelve y se almacena en la variable de datos .
Lo averigué. Usó esto en su lugar.
$(''.div_class'').load(''http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle'');
Necesita un proxy CORS que envíe su pedido de su navegador al servicio solicitado con los encabezados CORS apropiados. La lista de dichos servicios se encuentra en el siguiente fragmento de código. También puede ejecutar el fragmento de código proporcionado para ver ping a dichos servicios desde su ubicación.
$(''li'').each(function() {
var self = this;
ping($(this).text()).then(function(delta) {
console.log($(self).text(), delta, '' ms'');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jdfreder/pingjs/c2190a3649759f2bd8569a72ae2b597b2546c871/ping.js"></script>
<ul>
<li>https://crossorigin.me/</li>
<li>https://cors-anywhere.herokuapp.com/</li>
<li>http://cors.io/</li>
<li>https://cors.5apps.com/?uri=</li>
<li>http://whateverorigin.org/get?url=</li>
<li>https://anyorigin.com/get?url=</li>
<li>http://corsproxy.nodester.com/?src=</li>
<li>https://jsonp.afeld.me/?url=</li>
<li>http://benalman.com/code/projects/php-simple-proxy/ba-simple-proxy.php?url=</li>
</ul>
Para obtener los datos del sitio externo mediante el uso de un proxy local como lo sugiere jherax, puede crear una página php que obtenga el contenido para usted desde la URL externa respectiva y luego enviar una solicitud get a esa página php.
var req = new XMLHttpRequest();
req.open(''GET'', ''http://localhost/get_url_content.php'',false);
if(req.status == 200) {
alert(req.responseText);
}
como un proxy php puedes usar https://github.com/cowboy/php-simple-proxy
Puede usar Ajax-cross-origin un plugin jQuery. Con este complemento utiliza jQuery.ajax() dominio cruzado. Utiliza los servicios de Google para lograr esto:
El complemento AJAX Cross Origin usa Google Apps Script como un proxy getter jSON donde jSONP no está implementado. Cuando establece la opción crossOrigin en verdadero, el complemento reemplaza la url original con la dirección de script de Google Apps y la envía como parámetro de url codificado. Google Apps Script utiliza los recursos de Google Servers para obtener los datos remotos y devolverlos al cliente como JSONP.
Es muy facíl de usar:
$.ajax({
crossOrigin: true,
url: url,
success: function(data) {
console.log(data);
}
});
Puedes leer más aquí: http://www.ajax-cross-origin.com/
Si el sitio externo no es compatible con JSONP o CORS, su única opción es usar un proxy.
Cree una secuencia de comandos en su servidor que solicite ese contenido, luego use jQuery ajax para hacer clic en la secuencia de comandos de su servidor.
Simplemente ponga esto en el encabezado de su página PHP y funcionará sin API:
header(''Access-Control-Allow-Origin: *''); //allow everybody
o
header(''Access-Control-Allow-Origin: http://codesheet.org''); //allow just one domain
o
$http_origin = $_SERVER[''HTTP_ORIGIN'']; //allow multiple domains
$allowed_domains = array(
''http://codesheet.org'',
''http://.com''
);
if (in_array($http_origin, $allowed_domains))
{
header("Access-Control-Allow-Origin: $http_origin");
}