jQuery AJAX 크로스 도메인

다음은 test.php와 testserver.php의 두 페이지입니다.

test.php

<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>

testserver.php

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

이제 내 문제는이 두 파일이 모두 동일한 서버 (로컬 호스트 또는 웹 서버)에 있으면 작동하고 alert (&" Success &")가 호출되지만 다른 서버에 있으면, 즉 웹 서버의 testserver.php와 로컬 호스트의 test.php가 있으면 작동하지 않고 alert (&" Error &")가 실행됩니다. 아약스 내부의 URL이 http://domain.com/path/to/file/testserver.php 로 변경되더라도

질문에 대한 의견 (2)
해결책

JSONP][1]을 사용합니다.

jQuery:


$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP 
해설 (11)

그러나 제슨프 좋은 인프라일까요 옵션을 쉽게. '설정' 헤더입니다 그 허용하시겠습니까 액세스 제어 서버의 됩니다. 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

이 예에서, AJAX 요청을 받아들일 것이라는 응답이 반품하십시오 say_hello '작업' 의 모든 도메인 및 누구없어요! &quot ";).

예 복귀하십시오 헤더도 슬라이드에서는 경우가 있다.

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/) 참조.

해설 (9)
    • 그 허용하시겠습니까 액세스 제어 추가하기만 http 헤더를 통해 이를 제어할 수 있습니다. * 크로스-도메인 AJAX 요청을 수락할 설정하면 모든 도메인의.
    • PHP 사용, s really simple, 다음 줄로 추가하기만 it& # 39 는 스크립트입니다 운영까지도 액세스하려면 바깥쪽인지가 에서 도메인:
header("Access-Control-Allow-Origin: *");

39 don& mod_headers 활성화하십시오 모듈에서의 하테프d.콘프트 빼놓을 수 없다.

해설 (0)

동일 출처 정책]1을 살펴봐야 합니다:

컴퓨팅에서 동일 오리진 정책은 은 중요한 보안 개념입니다. 자바스크립트와 같은 브라우저 측 프로그래밍 자바스크립트와 같은 언어에 대한 중요한 보안 개념입니다. 동일 출처 정책은 정책은 다음에서 실행되는 스크립트를 허용합니다. 동일한 사이트에서 시작된 페이지에서 실행되는 스크립트 서로의 메소드에 액세스하고 특정 제한이 없는 속성 제한이 없지만 액세스를 방지합니다. 대부분의 메소드 및 속성 다른 사이트의 페이지.

데이터를 가져올 수 있으려면 데이터가 있어야 합니다:

동일한 프로토콜 및 호스트

이를 해결하려면 JSONP를 구현해야 합니다.

해설 (1)

난 이미 웹 페이지에서, 로컬 디스크 &quot 호출하십시오 &quot http://localhost/getxml.php&quot 로드하기에 file:///C:/test/htmlpage.html";; 그리고 이렇게 IE8+ jQuery 라이브러리를 사용할 수 있는 url 을 브라우저 및 Firefox12+ v1.7.2 최소화하므로 상용구 코드. 수십 개의 기사를 읽은 뒤 마침내 해냈다. 이것은 내 요약.

  • 서버 스크립트 (.php, .j스프.) http 응답 헤더를 그 허용하시겠습니까 액세스 제어 반품해야 합니다. *
  • ajax 설정되었습니다 jQuery 사용하기 전에 이 플래그를 javascript: 이케리자주포트리코스 = true.
  • ajax 함수를 사용하기 전에 한 번 또는 everytime jQuery 플래깅 설정할 수 있습니다 ie, Firefox 에서 xml 문서를 읽을 수 있습니다 - 이젠. 내가 다른 브라우저의 테스트 않았다.
  • 텍스트, xml, json 또는 다른 사항은요 일반 / 응답 문서 수 있습니다.

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);
    }
});
해설 (2)

동일-출처 정책 때문에 하는 것은 사실이지만 수 있지만 단순히 JavaScript 에서 요청에 대해 도메인과의 고르 사양명세 API 를 지원하는 배치처리 액세스하면 정렬하려면 찾고 있으며, 현재 주요 브라우저.

알 수 있는 크로스 기원 위한 리소스 공유 클라이언트 및 서버:

http://enable-cors.org/

&quot 크로스 기원, 자원 공유 (고르) 는 오픈 액세스 할 수 있는 진정한 사양명세를 스트라이프하지 도메인 경계를. 컨텐츠가 경배하되 경우 브라우저 자바스크립트 / universal access.&quot 고르 사용해 보십시오 열기 위해 it up.

해설 (0)

내가 사용하는 Apache 서버 도왔으매 I& # 39, ve 함께사용할 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/

마지막으로 가상본 uirl 전달하십시오 데이터베이스에구성원을 스크립트입니다.

해설 (0)

이는 사용해야 할 수 있지만, JSON 제슨프 없습니다. # 39 의 stefan& 링크가 abc. 올바른 방향으로 가고 있습니다. JQuery 아약스 페이지 에서 더 많은 정보를 갖고 있는 제슨프.

레미 샤프 (sharp) 는 자세한 사용 예를 php.

해설 (1)

브라우저 보안은 한 도메인에서 호스팅되는 페이지에서 다른 도메인에서 호스팅되는 페이지로 아약스 호출을 방지하며, 이를 동일 출처 정책이라고 합니다.

해설 (1)

제슨프 사용하기 위한 몇 가지 예를 들어 있는 오류 처리.

그러나 이 때 트리거됨 제슨프 사용하여 오류 발생 유념하십시오 아니다! 참조: http://api.jquery.com/jQuery.ajax/ 또는 https://stackoverflow.com/questions/5247295/jquery-ajax-request-using-jsonp-error

해설 (0)

Jquery 의 문서 (링크).

  • 인해, 대부분의 브라우저 보안 제한사항에 &quot Ajax"; 요청은 어원이 같은 정책을 제외된다. 읽어들입니다 요청 데이터를 다른 도메인, 하위 도메인 또는 포로토콜 성공적으로 수 없습니다.

  • 스크립트입니다 및 정책 제한을 받지 않는 제슨프 요청률 같은 있다.

그래서 꼭 이래야겠어요 받으라니깐 해당 request 에 대한 제슨프 사용해야 합니다. 하지만, 이 t # 39 haven& 적이 있어요.

해설 (0)

그러니까말이야 3 방법으로 해결할 수 있다는 장점이 있습니다.

  1. 두 경우 먼저 액세스하도록 도메인과의 액세스할 수 있습니다 (나머지 모든 도메인 사용:

'헤더입니다 (&quot, 그 허용하시겠습니까 액세스 제어: '*").

htaccess 파일 벨로 위해 도메인 스피커에만 추가하기만 코드:

\ '&lt 필레스 마치. (트프 otf eot woff) $ &quot &gt ";;; &lt 이프모두리 mod_headers.c>; 그 &quot 스텐비프 :// (www.), http (s)?? (google.com staging.google.com development.google.com otherdomain.net dev02.otherdomain.net) $ &quot. 크세스콘트로랄로로리긴 = $0 Env = {} ᅦ 크세스콘트로랄로로리긴 크세스콘트로랄로로리긴 추가 헤더입니다 그 허용하시겠습니까 액세스 제어 % &lt /IfModule>; '/FilesMatch&gt <;

  1. ajax 요청을 서버에 있는 요청을 처리할 수 있습니다 php 파일을 다른 도메인 사용 방법은 php 절실해졌습니다.
  2. 제슨프 doesn& # 39, t need 권한 때문에 사용할 수 있습니다. 이를 위해 우리 친구 @BGerrissen 오토메이티드 읽을 수 있습니다.
해설 (0)
  • 용 마이크로소프트 애저, it& # 39 의 약간 different.*

Azure 가 고르 설정해야 하는 특별한 설정. # 39 의 it& 본질적으로 같은 것이 아니라 단지 머리글로 설정, behind the scenes 조슈아로 언급 작동하지 않습니다. 쓰여져 있는 문서를 사용할 수 있도록 하는 도메인 간 여기에서 찾을 수 있습니다.

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

내가 만약 이 실현을 위한 바이올린 수립하였습니다 대체하십시오 몇 시간 전에 내 호스팅 플랫폼 특수 설정값입니다.

해설 (0)

작동하잖아, all you need.

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 아약스):

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