web-dev-qa-db-fra.com

Chargement de points de terminaison inter-domaines avec jQuery AJAX

J'essaie de charger une page HTML interdomaine à l'aide de AJAX mais, à moins que le type de données soit "jsonp", je ne peux pas obtenir de réponse. Cependant, en utilisant jsonp, le navigateur attend un type mime de script mais reçoit "text/html".

Mon code pour la demande est:

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

Existe-t-il un moyen d'éviter d'utiliser jsonp pour la requête? J'ai déjà essayé d'utiliser le paramètre crossDomain mais cela n'a pas fonctionné.

Sinon, y a-t-il un moyen de recevoir le contenu HTML dans jsonp? Actuellement, la console dit "inattendu <" dans la réponse jsonp.

javascriptjqueryajaxcorscross-domain
114
xonorageous

Vous pouvez utiliser Ajax-cross-Origin un plugin jQuery . Avec ce plugin, vous utilisez jQuery.ajax() cross domain. Il utilise les services Google pour y parvenir:

Le plug-in AJAX Cross Origin utilise Google Apps Script en tant que proxy jSON getter où jSONP n'est pas implémenté. Lorsque vous définissez crossOrigin option à true, le plugin remplace l'URL d'origine par Google Adresse du script Apps et envoyez-la sous forme de paramètre d'URL codée. Le Google Le script Apps utilise les ressources de Google Servers pour obtenir les données distantes, et renvoyez-le au client en tant que JSONP.

C'est très simple à utiliser:

    $.ajax({
        crossOrigin: true,
        url: url,
        success: function(data) {
            console.log(data);
        }
    });

Vous pouvez en lire plus ici: http://www.ajax-cross-Origin.com/

19
Ninioe

Si le site externe ne prend pas en charge JSONP ou CORS, votre seule option consiste à utiliser un proxy.

Créez un script sur votre serveur qui demande ce contenu, puis utilisez jQuery ajax pour accéder au script sur votre serveur.

10
Kevin B

Il suffit de mettre ceci dans l'en-tête de votre page PHP et cela fonctionnera sans API:

header('Access-Control-Allow-Origin: *'); //allow everybody

ou

header('Access-Control-Allow-Origin: http://codesheet.org'); //allow just one domain

ou 

$http_Origin = $_SERVER['HTTP_Origin'];  //allow multiple domains

$allowed_domains = array(
  'http://codesheet.org',
  'http://stackoverflow.com'
);

if (in_array($http_Origin, $allowed_domains))
{  
    header("Access-Control-Allow-Origin: $http_Origin");
}
3
studio-klik

Pour obtenir le site de formulaire de données en passant à l'aide d'un proxy local comme suggéré par jherax, vous pouvez créer une page php qui récupère le contenu pour vous à partir de l'URL externe respective et d'envoyer une demande d'obtention à cette page php.

var req = new XMLHttpRequest();
req.open('GET', 'http://localhost/get_url_content.php',false);
if(req.status == 200) {
   alert(req.responseText);
}

en tant que proxy php, vous pouvez utiliser https://github.com/cowboy/php-simple-proxy

0
Nitigya Sharma

Je publie ceci au cas où quelqu'un ferait face au même problème que moi. J'ai une imprimante thermique Zebra, équipée du serveur d'impression ZebraNet, qui offre une interface utilisateur basée sur HTML permettant de modifier plusieurs paramètres, de voir l'état actuel de l'imprimante, etc. J'ai besoin de connaître l'état de l'imprimante, qui s'affiche. dans l'une de ces pages html, proposées par le serveur ZebraNet et, par exemple, alert (), un message à l'utilisateur dans le navigateur. Cela signifie que je dois d'abord obtenir cette page html en Javascript. Bien que l’imprimante se trouve sur le réseau local du PC de l’utilisateur, cette Même politique d’origine reste toujours dans mon état. J'ai essayé JSONP, mais le serveur renvoie html et je n'ai pas trouvé le moyen de modifier ses fonctionnalités (si je pouvais, j'aurais déjà défini l'en-tête magique Access-control-allow-Origin: *). J'ai donc décidé d'écrire une petite application console en C #. Pour fonctionner correctement, il doit être exécuté en tant qu'administrateur. Sinon, il fonctionne: une exception. Voici du code:

// 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();

Il suffit à l'utilisateur de lancer cette application de console en tant qu'administrateur. Je sais que c'est aussi trop ... frustrant et compliqué, mais c'est en quelque sorte une solution de contournement au problème de la stratégie de domaine au cas où vous ne pourriez pas modifier le serveur de quelque manière que ce soit.

edit: de js je fais un simple appel 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);
                }
            });

Le code HTML de la page demandée est renvoyé et stocké dans la variable data.

0
user2177283

Votre URL ne fonctionne pas ces jours-ci, mais votre code peut être mis à jour avec cette solution de travail:

var 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";

url = 'https://google.com'; // TEST URL

$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURI(url), function(data) {
    $('div.ajax-field').html(data);
});
<div class="ajax-field"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

0
350D