Vraag Interdomein-eindpunt laden met jQuery AJAX


Ik probeer een HTML-pagina met meerdere domeinen te laden met AJAX, maar tenzij het gegevenstype "jsonp" is, krijg ik geen reactie. Met behulp van jsonp verwacht de browser echter een script mime-type maar ontvangt "text / html".

Mijn code voor het verzoek is:

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

Is er een manier om te voorkomen dat je jsonp gebruikt voor het verzoek? Ik heb al geprobeerd de parameter crossDomain te gebruiken, maar deze werkte niet.

Als er geen manier is om de html-inhoud in jsonp te ontvangen? Momenteel zegt de console "onverwacht <" in het antwoord van de jsonp.


108
2018-02-21 15:04


oorsprong


antwoorden:


jQuery Ajax Notes

  • Vanwege de meeste beveiligingsbeperkingen van de browser Ajax verzoeken zijn onderworpen aan de hetzelfde oorsprongsbeleid; het verzoek kan geen gegevens uit een ander domein, subdomein, poort of protocol ophalen.
  • Script- en JSONP-aanvragen zijn niet onderworpen aan dezelfde restricties voor het oorsprongsbeleid.

Er zijn enkele manieren om het te overwinnen cross-domain barrière:

Er zijn enkele plug-ins die helpen cross-domain verzoeken:

Kom op!

De beste manier om dit probleem te verhelpen, is door uw eigen proxy in de back-end te maken, zodat uw proxy naar de services in andere domeinen verwijst, omdat er in de back-end niet de hetzelfde oorsprongsbeleid beperking. Maar als u dat niet in back-end kunt doen, let dan op de volgende tips.


Waarschuwing!

Het gebruik van externe proxies is geen veilige praktijk, omdat ze uw gegevens kunnen bijhouden, zodat deze kan worden gebruikt met openbare informatie, maar nooit met privégegevens.


De onderstaande codevoorbeelden gebruiken jQuery.get () en jQuery.getJSON (), beide zijn steno-methoden van jQuery.ajax ()


CORS overal

CORS Anywhere is een node.js proxy die CORS-headers toevoegt aan het proxiede verzoek.
Als u de API wilt gebruiken, voert u de URL in met de API-URL. (ondersteunt https: zien github repository)

Als u automatisch interdomeinverzoeken wilt inschakelen wanneer dit nodig is, gebruikt u het volgende fragment:

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


Welke oorsprong ook

Welke oorsprong ook is een cross domein jsonp toegang. Dit is een open source alternatief voor anyorigin.com.

Om de gegevens op te halen google.com, je kunt dit fragment gebruiken:

// 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 is eenvoudig node.js proxy om het CORS-verzoek voor een website in te schakelen. Het biedt javascript-code op uw site toegang tot bronnen in andere domeinen die normaal gesproken worden geblokkeerd vanwege hetzelfde beleid van oorsprong.

Hoe werkt het? CORS Proxy maakt gebruik van Cross-Origin Resource Sharing, een functie die is toegevoegd in combinatie met HTML 5. Servers kunnen aangeven dat browsers andere websites moeten toestaan ​​om hulpbronnen aan te vragen die zij hosten. CORS Proxy is eenvoudigweg een HTTP-proxy die een koptekst toevoegt aan antwoorden die zegt "iedereen kan dit aanvragen".

Dit is een andere manier om het doel te bereiken (zie www.corsproxy.com). Het enige wat je hoeft te doen is strippen http: // en www. van de URL die proxied is, en voeg de URL toe met www.corsproxy.com/

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


CORS-proxybrowser

Onlangs vond ik deze, het gaat om verschillende op beveiliging gerichte Cross Origin Remote Sharing-hulpprogramma's. Maar het is een black-box met Flash als backend.

Je kunt het hier in actie zien: CORS-proxybrowser
Download de broncode op GitHub: koto / cors-proxy-browser


203
2018-06-25 14:18



Je kunt Ajax-cross-origin een jQuery-plug-in gebruiken. Met deze plug-in die u gebruikt jQuery.ajax() cross domein. Het maakt gebruik van Google-services om dit te bereiken:

De AJAX Cross Origin-plug-in gebruikt Google Apps Script als een proxy jSON   getter waar jSONP niet is geïmplementeerd. Wanneer u de crossOrigin hebt ingesteld   optie om waar te maken, vervangt de plug-in de oorspronkelijke URL door Google   Apps Script-adres en verzend het als gecodeerde URL-parameter. De Google   Apps Script gebruikt Google Servers-bronnen om de externe gegevens op te halen, en   stuur het terug naar de client als JSONP.

Het is heel eenvoudig te gebruiken:

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

U kunt hier meer lezen: http://www.ajax-cross-origin.com/


19
2017-08-03 16:30



Als de externe site JSONP of CORS niet ondersteunt, is uw enige optie om een ​​proxy te gebruiken.

Maak een script op uw server dat die inhoud opvraagt ​​en gebruik vervolgens jQuery ajax om het script op uw server te activeren.


11
2018-02-21 15:05



Zet dit gewoon in de kop van uw PHP-pagina en het werkt zonder API:

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

of

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

of

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

1
2017-09-17 22:08



Ik plaats dit voor het geval iemand voor hetzelfde probleem staat waar ik nu mee te maken heb. Ik heb een Zebra-thermische printer, uitgerust met de ZebraNet-printserver, die een HTML-gebaseerde gebruikersinterface biedt voor het bewerken van meerdere instellingen, het bekijken van de huidige status van de printer, enz. Ik moet de status van de printer krijgen, die wordt weergegeven in een van die html-pagina's aangeboden door de ZebraNet-server en bijvoorbeeld alert () een bericht voor de gebruiker in de browser. Dit betekent dat ik eerst die html-pagina in Javascript moet ophalen. Hoewel de printer zich binnen het LAN van de pc van de gebruiker bevindt, is dat Hetzelfde oorsprongsbeleid blijft nog steeds stevig op mijn weg. Ik heb JSONP geprobeerd, maar de server retourneert html en ik heb geen manier gevonden om de functionaliteit ervan aan te passen (als ik kon, had ik de magische header Access-control-allow-origin al ingesteld: *). Dus besloot ik om een ​​kleine console-app te schrijven in C #. Het moet als Admin worden uitgevoerd om naar behoren te werken, anders trollt het: D een uitzondering. Hier is een 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();

De gebruiker hoeft alleen maar die console-app als beheerder uit te voeren. Ik weet dat het veel te frustrerend en ingewikkeld is, maar het is een soort van oplossing voor het probleem met het domeinbeleid, voor het geval je de server op geen enkele manier kunt wijzigen.

edit: from js Ik maak een eenvoudige ajax-oproep:

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

De html van de opgevraagde pagina wordt geretourneerd en opgeslagen in de gegevens variabel.


0
2018-05-18 10:46



Als u de gegevens van de externe site wilt ophalen door een lokale proxy te gebruiken, zoals gesuggereerd door jherax, kunt u een php-pagina maken die de inhoud voor u ophaalt uit de respectieve externe URL en vervolgens een get-aanvraag naar die php-pagina verzenden.

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

als een php-proxy die u kunt gebruiken https://github.com/cowboy/php-simple-proxy


0
2018-06-22 12:44



U hebt een CORS-proxy nodig die uw verzoek van uw browser naar de gevraagde service met de juiste proxy overneemt CORS headers. De lijst met dergelijke services staat hieronder in het codefragment. U kunt ook het meegeleverde codefragment uitvoeren om vanaf uw locatie naar deze services te pingen.

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


-2
2018-06-01 23:23



Ik heb het uitgezocht. Gebruikt dit in plaats daarvan.

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

-7
2018-06-16 12:45