태그 보관물: ajax

ajax

AJAX를 사용하여 도메인 간 엔드 포인트로드 크로스 도메인 HTML 페이지를로드하려고하는데 dataType이 “jsonp”가 아니면

AJAX를 사용하여 크로스 도메인 HTML 페이지를로드하려고하는데 dataType이 “jsonp”가 아니면 응답을 얻을 수 없습니다. 그러나 jsonp를 사용하면 브라우저에서 스크립트 MIME 유형이 필요하지만 “text / html”이 수신됩니다.

요청에 대한 코드는 다음과 같습니다.

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

요청에 jsonp를 사용하지 않는 방법이 있습니까? 이미 crossDomain 매개 변수를 사용해 보았지만 작동하지 않았습니다.

jsonp에서 html 컨텐츠를 수신하는 방법이 없다면? 현재 콘솔은 jsonp 응답에서 “예기치 않은 <“이라고 말합니다.



답변

jQuery 아약스 노트

  • 브라우저 보안 제한으로 인해 대부분의 Ajax 요청에는 동일한 오리진 정책 이 적용됩니다 . 요청이 다른 도메인, 하위 도메인, 포트 또는 프로토콜에서 데이터를 성공적으로 검색 할 수 없습니다.
  • 스크립트 및 JSONP 요청에는 동일한 원본 정책 제한이 적용되지 않습니다.

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

도메인 간 요청에 도움이되는 플러그인이 있습니다 .

헤즈 업!

이 문제를 극복하는 가장 좋은 방법은 백엔드에 동일한 원본 정책 제한 이 없으므로 프록시가 다른 도메인의 서비스를 가리 키도록 백엔드에 자신의 프록시를 만드는 것 입니다. 그러나 백엔드에서이를 수행 할 수없는 경우 다음 팁에주의하십시오.


경고!

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


아래에 표시된 코드 예제는 jQuery.get ()jQuery.getJSON ()을 사용 하며 둘 다 jQuery.ajax () 의 속기 방법입니다.


어느 곳에서나 CORS

CORS Anywhere는 프록시 요청에 CORS 헤더를 추가 하는 node.js 프록시 입니다.
API를 사용하려면 URL 앞에 API 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);
});

어떤 기원

Origin무엇이든간에 도메인 간 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 프록시는 모든 웹 사이트에 대해 CORS 요청을 활성화 하는 간단한 node.js 프록시 입니다. 사이트의 자바 스크립트 코드가 동일한 출처 정책으로 인해 일반적으로 차단되는 다른 도메인의 리소스에 액세스 할 수 있습니다.

어떻게 작동합니까? CORS Proxy는 HTML 5와 함께 추가 된 기능인 Cross-Origin Resource Sharing을 활용합니다. 서버는 다른 웹 사이트가 호스팅하는 리소스를 브라우저가 허용하도록 브라우저를 지정할 수 있습니다. CORS 프록시는 단순히 “누구든지 이것을 요청할 수 있습니다”라는 응답에 헤더를 추가하는 HTTP 프록시입니다.

이것이 목표를 달성하는 또 다른 방법입니다 ( www.corsproxy.com 참조 ). http : //www를 제거하기 만하면됩니다. 프록시 된 URL에서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 프록시 브라우저

최근 에이 것을 발견했으며 다양한 보안 지향의 Cross Origin Remote Sharing 유틸리티가 포함되어 있습니다. 그러나 Flash를 백엔드로 사용하는 블랙 박스입니다.

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


답변

jQuery 플러그인에서 Ajax-cross-origin을 사용할 수 있습니다. 이 플러그인에서는 jQuery.ajax()교차 도메인 을 사용 합니다. 이를 위해 Google 서비스를 사용합니다.

AJAX Cross Origin 플러그인은 Google Apps Script를 jSONP가 구현되지 않은 프록시 jSON getter로 사용합니다. crossOrigin 옵션을 true로 설정하면 플러그인이 원래 URL을 Google Apps Script 주소로 바꾸고 인코딩 된 URL 매개 변수로 보냅니다. Google Apps 스크립트는 Google 서버 리소스를 사용하여 원격 데이터를 가져와 JSONP로 클라이언트에 다시 반환합니다.

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

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

자세한 내용은 여기를 참조하십시오 :
http://www.ajax-cross-origin.com/


답변

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

해당 컨텐츠를 요청하는 스크립트를 서버에서 빌드 한 다음 jQuery ajax를 사용하여 서버에서 스크립트를 실행하십시오.


답변

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

답변

누군가 내가 지금 직면하고있는 것과 같은 문제에 직면하는 경우에 이것을 게시하고 있습니다. ZebraNet 프린트 서버가 장착 된 Zebra 감열 식 프린터를 가지고 있는데, 여러 설정을 편집하고 프린터의 현재 상태를 볼 수있는 HTML 기반 사용자 인터페이스를 제공합니다. 프린터의 상태를 가져와야합니다. ZebraNet 서버가 제공하는 html 페이지 중 하나에서, 예를 들어 브라우저에서 사용자에게 메시지를 alert ()합니다. 즉, 해당 HTML 페이지를 Javascript로 먼저 가져와야합니다. 프린터가 사용자 PC의 LAN 내에 있지만 동일한 출처 정책여전히 내 방식대로 단단히 유지되고 있습니다. JSONP를 시도했지만 서버가 html을 반환하고 기능을 수정하는 방법을 찾지 못했습니다 (가능한 경우 이미 매직 헤더 Access-control-allow-origin : *을 설정했을 것입니다). 그래서 C #으로 작은 콘솔 앱을 작성하기로 결정했습니다. 제대로 작동하려면 관리자 권한으로 실행해야합니다. 그렇지 않으면 예외가 발생합니다. 다음은 몇 가지 코드입니다.

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

콘솔 사용자를 관리자 권한으로 실행하기 만하면됩니다. 나는 그것이 너무 실망스럽고 복잡하다는 것을 알고 있지만 어떤 식 으로든 서버를 수정할 수없는 경우 도메인 정책 문제에 대한 해결 방법입니다.

편집 : 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이 반환되어 data 변수에 저장됩니다 .


답변

jherax가 제안한 로컬 프록시를 사용하여 데이터 양식 외부 사이트를 얻으려면 각 외부 URL에서 콘텐츠를 가져오고 해당 PHP 페이지에 get 요청을 보내는 php 페이지를 만들 수 있습니다.

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 를 사용할 수 있습니다


답변

귀하는 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";

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>