J'essaye de charger une page HTML inter-domaines en utilisant AJAX mais à moins que le dataType soit "jsonp" je ne peux pas obtenir de réponse. Cependant, en utilisant jsonp, le navigateur attend un type de script mime 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.

Notes jQuery Ajax

• En raison des restrictions de sécurité du navigateur, la plupart des demandes Ajax sont soumises à la même politique d'origine ; la demande ne parvient pas à récupérer les données d'un autre domaine, sous-domaine, port ou protocole.
• Les requêtes de script et JSONP ne sont pas soumises aux mêmes restrictions de politique d'origine.

Il y a des façons de surmonter la interdomaine barrière:

• Alternatives de proxy CORS
• Moyens de contourner la politique de même origine
• Briser la barrière entre domaines

Il existe des plugins qui aident avec les requêtes inter-domaines :

• Requête AJAX inter-domaines avec YQL et jQuery
• Requêtes inter-domaines avec jQuery.ajax

La tête haute!

La meilleure façon de surmonter ce problème est de créer votre propre proxy dans le back-end, de sorte que votre proxy pointe vers les services dans d'autres domaines, car dans le back-end n'existe pas la même restriction de politique d'origine . Mais si vous ne pouvez pas faire cela dans le back-end, faites attention aux conseils suivants.

L'utilisation de proxys tiers n'est pas une pratique sécurisée, car ils peuvent garder une trace de vos données, afin qu'elles puissent être utilisées avec des informations publiques, mais jamais avec des données privées.

CORS n'importe où

CORS Anywhere est un proxy node.js qui ajoute des en-têtes CORS à la requête mandatée.
Pour utiliser l'API, préfixez simplement l'URL avec l'URL de l'API. (Prend en charge https : voir le référentiel github )

Si vous souhaitez activer automatiquement les requêtes inter-domaines en cas de besoin, utilisez l'extrait de code suivant:

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

Quelle que soit l'origine

Quelle que soit l'origine est un accès jsonp interdomaine . Ceci est une alternative open source à anyorigin.com .

Pour récupérer les données de google.com, vous pouvez utiliser cet extrait:

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

Proxy CORS

CORS Proxy est un simple proxy node.js pour activer la requête CORS pour n'importe quel site Web. Il permet au code javascript sur votre site d'accéder à des ressources sur d'autres domaines qui seraient normalement bloqués en raison de la politique de même origine.

• CORS-Proxy gr2m
• CORS-Proxy rmadhuram

Comment ça marche? CORS Proxy tire parti du partage de ressources cross-origin, qui est une fonctionnalité qui a été ajoutée avec HTML 5. Les serveurs peuvent spécifier qu'ils souhaitent que les navigateurs autorisent d'autres sites Web à demander les ressources qu'ils hébergent. CORS Proxy est simplement un proxy HTTP qui ajoute un en-tête aux réponses disant "n'importe qui peut demander ceci".

C'est une autre façon d'atteindre l'objectif (voir www.corsproxy.com ). Tout ce que vous avez à faire est de déshabiller http: // et www. à partir de l'URL faisant l'objet d'un proxy, et ajoutez l'URL avecwww.corsproxy.com/

$.get(
    'http://www.corsproxy.com/' +
    'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});

Navigateur proxy CORS

Récemment, j'ai trouvé celui-ci, il implique divers utilitaires de partage à distance Cross Origin orientés sécurité. Mais c'est une boîte noire avec Flash comme backend.

Vous pouvez le voir en action ici: Navigateur proxy CORS
Obtenez le code source sur GitHub: koto / cors-proxy-browser

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

Le plug-in AJAX Cross Origin utilise Google Apps Script comme getter proxy jSON où jSONP n'est pas implémenté. Lorsque vous définissez l'option crossOrigin sur true, le plug-in remplace l'URL d'origine par l'adresse de script Google Apps et l'envoie en tant que paramètre d'URL encodée. Le script Google Apps utilise les ressources des serveurs Google pour obtenir les données distantes et les renvoyer au client au format JSONP.

C'est très simple à utiliser:

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

Vous pouvez en savoir plus ici: http://www.ajax-cross-origin.com/

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

Créez un script sur votre serveur qui demande ce contenu, puis utilisez jQuery ajax pour lancer le script sur votre serveur.

Mettez simplement ceci dans l'en-tête de votre page PHP et cela ne fonctionnera pas 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");
}

Je poste ceci au cas où quelqu'un serait confronté au même problème que celui auquel je suis confronté actuellement. J'ai une imprimante thermique Zebra, équipée du serveur d'impression ZebraNet, qui offre une interface utilisateur basée sur HTML pour modifier plusieurs paramètres, voir l'état actuel de l'imprimante, etc. J'ai besoin d'obtenir l'état de l'imprimante, qui est affiché 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 dans le réseau local du PC de l'utilisateur, cette même politique d'originereste fermement sur mon chemin. J'ai essayé JSONP, mais le serveur renvoie html et je n'ai pas trouvé de 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 #. Il doit être exécuté en tant qu'administrateur pour fonctionner correctement, sinon il trolls: D une exception. Voici un 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();

Tout ce que l'utilisateur doit faire est d'exécuter cette application de console en tant qu'administrateur. Je sais que c'est trop ... frustrant et compliqué, mais c'est en quelque sorte une solution de contournement au problème de politique de domaine au cas où vous ne pourriez pas modifier le serveur de quelque manière que ce soit.

edit: depuis 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 html de la page demandée est retourné et stocké dans la variable de données .

Pour obtenir le site externe du formulaire de données en utilisant 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 ensuite 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

Votre URLne fonctionne pas ces jours-ci, mais votre code peut être mis à jour avec cette solution fonctionnelle:

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>

Vous avez besoin d'un proxy CORS qui transmet par proxy votre demande de votre navigateur au service demandé avec les en- têtes CORS appropriés . La liste de ces services se trouve dans l'extrait de code ci-dessous. Vous pouvez également exécuter l'extrait de code fourni pour voir le ping vers ces services à partir de votre emplacement.

$('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>

Deviner. Utilisé ceci à la place.

$('.div_class').load('http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle');