복붙노트

[JQUERY] AJAX와 크로스 도메인 엔드 포인트로드

JQUERY

AJAX와 크로스 도메인 엔드 포인트로드

해결법

  1. 1.도메인 간 장벽을 극복하는 몇 가지 방법이 있습니다 :

    도메인 간 장벽을 극복하는 몇 가지 방법이 있습니다 :

    일부 플러그인이 있습니다 그 크로스 도메인 요청에 대한 도움말 :

    헤드 업!

    이 문제를 해결하는 가장 좋은 방법은 아닌 동일 출처 정책 제한을 존재 프록시 때문에 백엔드에서 다른 도메인의 서비스를 가리 킵니다 그래서, 백 엔드에서 자신의 프록시를 만드는 것입니다. 그러나 다음과 같은 팁, 백엔드에서 다음에주의를 그렇게 할 수없는 경우.

    경고!

    그들이 공공 정보를 사용할 수 있도록 사용자의 데이터를 추적,하지만 결코 개인 데이터를 수 있기 때문에 타사 프록시를 사용하는 것은 안전한 방법이 아닙니다.

    사용 jQuery.get () 및 jQuery.getJSON () 아래에 도시 된 코드 예제 jQuery.ajax의 속기이다 방법 모두 ()

    CORS는 어디서나 프록시 요청에 CORS 헤더를 추가하는 Node.js를 프록시입니다. API를 사용하려면, 단지 API의 URL과 URL 접두사. (지지대은 https : GitHub의 저장소를 참조)

    당신이 필요할 때 자동으로 크로스 도메인 요청을 사용하려면, 다음 코드를 사용합니다 :

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

    무엇이든 원산지는 크로스 도메인 JSONP 액세스입니다. 이 anyorigin.com에 오픈 소스 대안입니다.

    google.com에서 데이터를 가져 오기 위해,이 조각을 사용할 수 있습니다 :

    // 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 프록시 CORS가 어떤 웹 사이트에 대한 요청 수 있도록하는 간단한 Node.js를 프록시입니다. 그것은 일반적으로 인해 동일 출처 정책에 차단 될 다른 도메인의 리소스에 액세스 귀하의 사이트에 자바 스크립트 코드를 할 수 있습니다.

    그것은 어떻게 작동합니까? CORS 프록시은 브라우저들이 호스트 요청 리소스에 다른 웹 사이트를 허용하도록 지정할 수 있습니다 HTML 5 서버와 함께 추가 된 기능입니다 간 리소스 공유, 활용합니다. CORS 프록시는 단순히 응답이 "사람이를 요청할 수 있습니다"말에 헤더를 추가하는 HTTP 프록시입니다.

    이 (가 www.corsproxy.com 참조) 목표를 달성하는 또 다른 방법입니다. // www와를 : 당신이해야 할 모든 HTTP를 제거합니다. URL에서 프록시를, 그리고 www.corsproxy.com/로 URL을 앞에 추가

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

    최근에 나는 원격 유틸리티를 공유 크로스 원산지 중심의 다양한 보안 관련,이 하나를 발견했다. 하지만 백엔드로 플래시와 블랙 박스입니다.

    현재 작업에서 볼 수 있습니다 : 프록시 브라우저를 고르 GitHub의에 소스 코드를 가져 오기 : 고토 / 고르 프록시 브라우저

  2. 2.당신은 아약스 - 출처 간 JQuery와 플러그인을 사용할 수 있습니다. 이 플러그인을 사용하면 jQuery.ajax () 크로스 도메인을 사용합니다. 그것은이를 달성하기 위해 Google 서비스를 사용합니다 :

    당신은 아약스 - 출처 간 JQuery와 플러그인을 사용할 수 있습니다. 이 플러그인을 사용하면 jQuery.ajax () 크로스 도메인을 사용합니다. 그것은이를 달성하기 위해 Google 서비스를 사용합니다 :

    그것은 사용하기 매우 간단합니다 :

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

    당신은 자세한 내용은 여기를 읽을 수 있습니다 : http://www.ajax-cross-origin.com/

  3. 3.외부 사이트가 JSONP 또는 CORS를 지원하지 않는 경우, 귀하의 유일한 옵션은 프록시를 사용하는 것입니다.

    외부 사이트가 JSONP 또는 CORS를 지원하지 않는 경우, 귀하의 유일한 옵션은 프록시를 사용하는 것입니다.

    내용, 다음 jQuery를 사용하는 것이 요청이 서버에 스크립트를 칠 아약스 것을 서버에 스크립트를 구축 할 수 있습니다.

  4. 4.그냥 PHP 페이지의 헤더에 넣고 그것은 API없이 작동합니다 :

    그냥 PHP 페이지의 헤더에 넣고 그것은 API없이 작동합니다 :

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

    또는

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

    또는

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

  5. 5.나는이 경우에 누군가가 내가 지금 직면하고있는 동일한 문제에 직면 게시하도록하겠습니다. 나는 표시되는 프린터의 상태를 확인하는 등 I 필요성을 여러 설정을 편집 프린터의 현재 상태를보고하기위한 HTML 기반의 사용자 인터페이스를 제공하는 ZebraNet 프린터 서버가 장착, 얼룩말 열 프린터있어 ZebraNet 서버에서 제공하는 HTML 페이지의 하나, 브라우저에서 사용자에게 예를 들어, 경고 () 메시지이다. 이 방법은 내가 먼저 자바 스크립트가 HTML 페이지를 얻을 수 있다고. 프린터가 사용자의 PC의 LAN 내에 있지만, 같은 기원 정책은 여전히 ​​내 방식으로 단단히 머물고있다. 내가 JSONP를 시도했지만 서버가 반환과 내가 그 기능을 수정하는 방법을 발견하지 않은 HTML (내가 할 수 있다면, 나는 이미 마법 헤더 액세스 제어 - 수 - 원점을 설정 한 것 : *). 그래서 나는 C #에서 작은 콘솔 응용 프로그램을 작성하기로 결정했다. 그것은 그렇지 않으면 트롤, 제대로 작동하려면 관리자로 실행해야합니다 : D 예외. 여기에 몇 가지 코드는 다음과 같습니다

    나는이 경우에 누군가가 내가 지금 직면하고있는 동일한 문제에 직면 게시하도록하겠습니다. 나는 표시되는 프린터의 상태를 확인하는 등 I 필요성을 여러 설정을 편집 프린터의 현재 상태를보고하기위한 HTML 기반의 사용자 인터페이스를 제공하는 ZebraNet 프린터 서버가 장착, 얼룩말 열 프린터있어 ZebraNet 서버에서 제공하는 HTML 페이지의 하나, 브라우저에서 사용자에게 예를 들어, 경고 () 메시지이다. 이 방법은 내가 먼저 자바 스크립트가 HTML 페이지를 얻을 수 있다고. 프린터가 사용자의 PC의 LAN 내에 있지만, 같은 기원 정책은 여전히 ​​내 방식으로 단단히 머물고있다. 내가 JSONP를 시도했지만 서버가 반환과 내가 그 기능을 수정하는 방법을 발견하지 않은 HTML (내가 할 수 있다면, 나는 이미 마법 헤더 액세스 제어 - 수 - 원점을 설정 한 것 : *). 그래서 나는 C #에서 작은 콘솔 응용 프로그램을 작성하기로 결정했다. 그것은 그렇지 않으면 트롤, 제대로 작동하려면 관리자로 실행해야합니다 : D 예외. 여기에 몇 가지 코드는 다음과 같습니다

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

    할 수있는 모든 사용자의 요구는 admin으로 그 콘솔 응용 프로그램을 실행합니다. 당신이 어떤 방법으로 서버를 수정할 수 없습니다 나는 그것이 너무 ... 좌절하고 복잡 알고 있지만, 경우에 일종의 도메인 정책 문제에 대한 해결 방법입니다.

    편집 : JS에서 나는 간단한 아약스 전화를 걸 :

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

    요청 된 페이지의 HTML 반환 데이터 변수에 저장된다.

  6. 6.이 PHP 페이지에 GET 요청을 보내는 것보다이 각각 외부 URL에서 당신을위한 컨텐츠를 가져 오는 PHP 페이지를 만들 수 있습니다 jherax에 의해 제안 로컬 프록시를 사용하여 전달하여 데이터가 외부 사이트를 형성 얻으려면.

    이 PHP 페이지에 GET 요청을 보내는 것보다이 각각 외부 URL에서 당신을위한 컨텐츠를 가져 오는 PHP 페이지를 만들 수 있습니다 jherax에 의해 제안 로컬 프록시를 사용하여 전달하여 데이터가 외부 사이트를 형성 얻으려면.

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

    당신이 사용할 수있는 PHP를 프록시로 https://github.com/cowboy/php-simple-proxy

  7. 7.귀하의 URL 요즘 작동하지 않습니다,하지만 당신의 코드는이 작업 솔루션을 업데이트 할 수 있습니다 :

    귀하의 URL 요즘 작동하지 않습니다,하지만 당신의 코드는이 작업 솔루션을 업데이트 할 수 있습니다 :

    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 "; = 'https://google.com'를 URL; // 테스트 URL $ 갔지 ( "https : //로 이미지"+ ~~ (인 Math.random () * 33) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url="+에 encodeURI (URL), 기능 (데이터) { $ ( 'div.ajax 필드') HTML (데이터).; });

    <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

  8. 8.당신은 적절한 CORS 헤더와 요청 된 서비스에 브라우저에서 요청을 프록시를 CORS 프록시가 필요합니다. 이러한 서비스의 목록은 아래 코드에 있습니다. 당신은 또한 당신의 위치에서 이러한 서비스에 핑을보고 제공되는 코드를 실행할 수 있습니다.

    당신은 적절한 CORS 헤더와 요청 된 서비스에 브라우저에서 요청을 프록시를 CORS 프록시가 필요합니다. 이러한 서비스의 목록은 아래 코드에 있습니다. 당신은 또한 당신의 위치에서 이러한 서비스에 핑을보고 제공되는 코드를 실행할 수 있습니다.

    $ ( '리'). 각 (함수 () { var에 자신이 =; 핑 ($ (이)는 .text ()). 다음 (함수 (델타) { 을 console.log ($ (자기)는 .text (), 델타, 'MS'); }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 SRC = "https://cdn.rawgit.com/jdfreder/pingjs/c2190a3649759f2bd8569a72ae2b597b2546c871/ping.js">

    • https://crossorigin.me/
    • https://cors-anywhere.herokuapp.com/
    • http://cors.io/
    • https://cors.5apps.com/?uri=
    • http://whateverorigin.org/get?url=
    • https://anyorigin.com/get?url=
    • http://corsproxy.nodester.com/?src=
    • https://jsonp.afeld.me/?url=
    • http://benalman.com/code/projects/php-simple-proxy/ba-simple-proxy.php?url=

    • 9.그것을 알아 냈다. 대신이 사용됩니다.

      그것을 알아 냈다. 대신이 사용됩니다.

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

    from https://stackoverflow.com/questions/15005500/loading-cross-domain-endpoint-with-ajax by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 숫자 (0-9)에서 HTML에서 InputBox jQuery를 사용하는 경우에만 허용하는?  (0) 2020.09.22
[JQUERY] 자바 스크립트 / jQuery를 사용하여 파일 다운로드  (0) 2020.09.22
[JQUERY] 어떻게 jQuery를 아약스 - 요청 FormData 객체를 보내? [복제]  (0) 2020.09.22
[JQUERY] 어떻게 JQuery와 동기보다는 비동기, Ajax 요청을 수행 할 수 있습니까?  (0) 2020.09.22
[JQUERY] CSTE 연구진은 .click 대 ( '클릭')의 차이 ()  (0) 2020.09.22
,

티스토리툴바