source

jQuery AJAX 교차 도메인

goodcode 2022. 10. 6. 21:44
반응형

jQuery AJAX 교차 도메인

여기 두 페이지 있어요, 테스트.php 및 testserver.displaces 입니다.

test.discloss를 실행합니다.discloss 。

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
    $(function() {
        $.ajax({url:"testserver.php",
            success:function() {
                alert("Success");
            },
            error:function() {
                alert("Error");
            },
            dataType:"json",
            type:"get"
        }
    )})
</script>

테스트 서버php

<?php
$arr = array("element1",
             "element2",
             array("element31","element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

의 파일이 같은 Web 서버, 해, 「」( 「로컬 호스트 또는 Web 서버)가 됩니다.alert("Success")가 호출됩니다.합니다.localhost의 하지 않고 localhost의 php는 동작하지 않습니다.alert("Error")행행중중중중다다이 AJAX의 되어도 AJAX의 URL은 되지 않습니다.http://domain.example/path/to/file/testserver.php

JSONP 를 사용합니다.

j쿼리:

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     }      
});

PHP:

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>

에코가 잘못될 수 있습니다.를를 php 、 를를를를를 를를 를를를 를를 를를 。에도 출력할 가 있습니다.callbackName('jsonString').jQuery는 자체 콜백 이름을 전달하므로 GET 매개 변수에서 가져와야 합니다.

Stefan Kendall이 게시한 바와 같이 $.getJSON()은 속기법이지만, 그 후 추가가 필요합니다.'callback=?'get 파라미터로서 URL에 할당됩니다(예, 값은 ?, jQuery는 이것을 자체 생성된 콜백 메서드로 대체합니다).

JSONP에 의한 것입니다. 간단하게 할 수 .Access-Control-Allow-Origin머리글「 」로 *는 임의의 도메인으로부터의 크로스 도메인 AJAX 요구를 받아들입니다.(https://developer.mozilla.org/en/http_access_control)

물론, 이것을 하는 방법은 언어마다 다를 것이다.다음은 레일즈입니다.

class HelloController < ApplicationController
  def say_hello
    headers['Access-Control-Allow-Origin'] = "*"
    render text: "hello!"
  end
end

예에서는, 「」를 해 주세요.say_hello액션 AJAX "hello!"라는 응답을 반환합니다.

다음으로 반환되는 헤더의 예를 나타냅니다.

HTTP/1.1 200 OK 
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
X-Ua-Compatible: IE=Edge
Etag: "c4ca4238a0b923820dcc509a6f75849b"
X-Runtime: 0.913606
Content-Length: 6
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)
Date: Thu, 01 Mar 2012 20:44:28 GMT
Connection: Keep-Alive

간단하지만 브라우저에 제한이 있습니다.http://caniuse.com/ #syslog=syslog 를 참조해 주세요.

이것은 Access-Control-Allow-Origin을 추가하여 HTTP 헤더를 통해 제어할 수 있습니다.*로 설정하면 모든 도메인에서 교차 도메인 AJAX 요청을 수락됩니다.

PHP를 사용하면 도메인 외부에서 액세스할 수 있는 스크립트에 다음 행을 추가할 수 있습니다.

header("Access-Control-Allow-Origin: *");

httpd.conf에서 mod_headers 모듈을 활성화하는 것을 잊지 마십시오.

동일한 오리진 정책을 확인해야 합니다.

컴퓨팅에서 동일한 원본 정책은 JavaScript와 같은 많은 브라우저 측 프로그래밍 언어에 대한 중요한 보안 개념입니다.이 정책에서는 같은 사이트에서 실행되는 페이지에서 실행되는 스크립트가 특별한 제한 없이 서로의 메서드 및 속성에 액세스할 수 있도록 허용하지만 서로 다른 사이트의 여러 페이지에 걸쳐 대부분의 메서드 및 속성에 액세스할 수 없도록 합니다.

데이터를 취득하려면 , 다음의 조건을 만족할 필요가 있습니다.

동일한 프로토콜 및 호스트

회피책으로서 JSONP를 실장할 필요가 있습니다.

로컬 디스크 "file://C:/test/htmlpage.html"에서 웹 페이지를 로드하고 "http://localhost/getxml.php" url을 호출하여 IE8+ 및 Firefox12+ 브라우저에서 이를 수행하고 jQuery v1.7.2 lib를 사용하여 보일러 플레이트 코드를 최소화해야 했습니다.수십 개의 기사를 읽은 후에야 겨우 알아냈다.여기 제 요약이 있습니다.

  • 서버 스크립트(.php, .jsp, ...)는 http 응답 헤더 Access-Control-Allow-Origin을 반환해야 합니다.*
  • jQuery ajax를 사용하기 전에 javascript에서 다음 플래그를 설정합니다.jQuery.support.cors = true;
  • jQuery ajax 함수를 사용하기 전에 플래그를 한 번 또는 매번 설정할 수 있습니다.
  • IE와 Firefox에서 .xml 문서를 읽을 수 있게 되었습니다.다른 브라우저는 테스트하지 않았다.
  • 응답 문서는 일반/텍스트, xml, json 또는 기타 모든 것이 될 수 있습니다.

다음은 debug sysout을 사용한jQuery ajax 콜의 예를 나타냅니다.

jQuery.support.cors = true;
$.ajax({
    url: "http://localhost/getxml.php",
    data: { "id":"doc1", "rows":"100" },
    type: "GET",
    timeout: 30000,
    dataType: "text", // "xml", "json"
    success: function(data) {
        // show text reply as-is (debug)
        alert(data);

        // show xml field values (debug)
        //alert( $(data).find("title").text() );

        // loop JSON array (debug)
        //var str="";
        //$.each(data.items, function(i,item) {
        //  str += item.title + "\n";
        //});
        //alert(str);
    },
    error: function(jqXHR, textStatus, ex) {
        alert(textStatus + "," + ex + "," + jqXHR.responseText);
    }
});

동일한 원본 정책에 따라 JavaScript가 도메인 간에 요청을 하는 것이 방지되는 것은 사실이지만, CORS 사양은 사용자가 원하는 종류의 API 액세스를 허용하며 현재 주요 브라우저 배치에서 지원됩니다.

클라이언트와 서버의 발신기지간 자원 공유를 유효하게 하는 방법을 참조해 주세요.

http://enable-cors.org/

「Cross-Origin Resource Sharing(CORS; 크로스 오리진 자원 공유)은, 도메인 경계를 넘어 정말로 개방적인 액세스를 가능하게 하는 사양입니다.공용 콘텐츠를 제공하는 경우 CORS를 사용하여 범용 JavaScript/브라우저 액세스를 위해 공개하는 것을 고려해 주십시오.

가능하지만 JSON이 아닌 JSONP를 사용해야 합니다.스테판의 연결고리가 당신을 올바른 방향으로 안내했어요JSONP에 대한 자세한 내용은 jQuery AJAX 페이지를 참조하십시오.

Remy Sharp에는 PHP를 사용한 자세한 예가 있습니다.

Apache 서버를 사용하고 있기 때문에 mod_proxy 모듈을 사용하고 있습니다.모듈 활성화:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

그 후 다음을 추가합니다.

ProxyPass /your-proxy-url/ http://service-url:serviceport/

마지막으로 proxy-url을 스크립트에 전달합니다.

브라우저 보안에 의해, 1 개의 도메인상에서 호스트 되고 있는 페이지에서 다른 도메인상에서 호스트 되고 있는 페이지로 Ajax 콜을 발신할 수 없게 됩니다.이것을 「동일 발신기지 정책」이라고 부릅니다.

Jquery 문서(링크):

  • 브라우저 보안 제한으로 인해 대부분의 "Ajax" 요청은 동일한 원본 정책을 따릅니다. 요청은 다른 도메인, 하위 도메인 또는 프로토콜에서 데이터를 성공적으로 검색할 수 없습니다.

  • 스크립트 요청과 JSONP 요청은 동일한 오리진 정책 제한을 받지 않습니다.

그래서 요청에는 jsonp를 사용해야 한다고 생각합니다.하지만 직접 먹어본 적은 없어요.

에러 처리를 포함한 JSONP의 사용 예는 거의 없습니다.

단, JSONP 사용 시 오류 이벤트는 트리거되지 않습니다.http://api.jquery.com/jQuery.ajax/ 또는 jSonp 오류를 사용한jQuery ajax 요청을 참조하십시오.

고객의 문제를 해결하는 3가지 방법을 알고 있습니다.

  1. 먼저 두 도메인에 모두 액세스할 수 있는 경우 다음을 사용하여 다른 모든 도메인에 대한 액세스를 허용할 수 있습니다.

    header("Access-Control-Allow-Origin: *");

    또는 .htaccess 파일에 bellow 코드를 추가하는 것만으로 도메인을 만들 수 있습니다.

    <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.net|dev02.otherdomain.net)$" AccessControlAllowOrigin=$0 Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin </IfModule> </FilesMatch>

  2. 서버의 php 파일에 대한 ajax 요청을 가지고 이 php 파일을 사용하여 다른 도메인에 대한 요청을 처리할 수 있습니다.

  3. 허가가 필요 없기 때문에 jsonp를 사용할 수 있습니다.당신은 우리의 친구 @BGerrissen의 답변을 읽을 수 있습니다.

Microsoft Azure 에서는, 조금 다릅니다.

Azure에는 특별한 CORS 설정이 필요합니다.이는 기본적으로 이면에서는 동일하지만 단순히 조슈아르의 언급을 헤더로 설정하는 것은 효과가 없습니다.크로스 도메인 활성화에 관한 Azure 문서는 다음 URL에서 찾을 수 있습니다.

https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

몇 시간 동안 이 문제를 만지작거리다가 호스팅 플랫폼에 이 특별한 설정이 있다는 것을 알게 되었습니다.

필요한 모든 것:

PHP:

header('Access-Control-Allow-Origin: http://www.example.com');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

JS(jQuery ajax): 

var getWBody = $.ajax({ cache: false,
        url: URL,
        dataType : 'json',
        type: 'GET',
        xhrFields: { withCredentials: true }
});

PHP로 동작하게 되었습니다.서비스된 페이지에 이것을 추가해 주세요.

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');

PS: 편리하고 편리한 방법으로 sa_ajax라는 이름의 자체 xhr 스위트를 만들었습니다.(https://github.com/osergioabreu/sa_ajax/)

언급URL : https://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain

반응형
저작자표시 (새창열림)

'source' 카테고리의 다른 글

Composer가 [Reflection]를 던지다예외] 클래스 Fxp\Composer\자산 플러그인\저장소\npmRepository가 존재하지 않습니다.  (0) 2022.10.06
Vue-router: Enter 가드가 하위 경로에 대해 제대로 작동하지 않습니다.  (0) 2022.10.06
위반 장시간 실행 JavaScript 태스크에 xxms가 소요되었습니다.  (0) 2022.10.06
Axios에서 HTTP 오류로 인해 상태 코드를 얻으려면 어떻게 해야 합니까?  (0) 2022.10.06
"java - server"와 "java - client"의 실제 차이점은 무엇입니까?  (0) 2022.10.06

'source'의 다른글

  • 현재글jQuery AJAX 교차 도메인

관련글

댓글

티스토리툴바