XMLHttpRequest가 jQuery로 URL을 로드할 수 없습니다.

XMLHttpRequest가 jQuery로 URL을 로드할 수 없습니다.

리모트 웹사이트에서 json 데이터를 가져오려고 합니다.99000 포트에서 웹 서비스를 실행하고 99001 포트에서 웹 사이트를 실행합니다(http://localhost:99001/index.html).

다음 메시지가 나타납니다.

    XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons. Origin http://localhost:99001 is not allowed by Access-Control-Allow-Origin.

Web 페이지를 HTML 파일로 기동해도, 다음과 같이 표시됩니다.

    XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons.Origin null is not allowed by Access-Control-Allow-Origin.

웹 서비스가 데이터를 반환합니다.다음과 같은 데이터 항목을 잡으려고 합니다.

var url = "http://localhost:99000/Services.svc/ReturnPersons";
$.getJSON(url, function (data) {
success: readData(data)
});
function readData(data) {
    alert(data[0].FirstName);
}

그리고 저는 이 구조를 얻으려고 합니다.

[{"FirstName":"Foo","LastName":"Bar"},{"Hello":"Foo","LastName":"World"}]

왜 이런 오류가 발생하는지 아세요?

XMLHttpRequest 크로스도메인은 실행할 수 없습니다.유일한 "옵션"은 JSONP라고 불리는 기술입니다.이 기술은 다음과 같습니다.

요청을 시작하려면:신규 추가<script>원격 URL을 태그하고 원격 URL이 콜백 함수를 호출하는 유효한 Javascript 파일을 반환하는지 확인합니다.일부 서비스에서는 이를 지원하고 있습니다(GET 파라미터로 콜백의 이름을 지정할 수 있습니다).

다른 쉬운 방법은 로컬 서버에 "프록시"를 생성하여 원격 요청을 받은 후 javascript로 "전송"하는 것입니다.

편집/삭제:

URL에 "callback=?"이(가) 포함되어 있는지 확인함으로써 jQuery에 JSONP에 대한 기본 지원 기능이 있음을 알 수 있습니다(여기서 jQuery는?를 실제 콜백 메서드로 대체합니다).그러나 유효한 응답을 생성하려면 원격 서버에서 이 작업을 처리해야 합니다.

새로운 jQuery 1.5에서는 다음을 사용할 수 있습니다.

$.ajax({
    type: "GET",
    url: "http://localhost:99000/Services.svc/ReturnPersons",
    dataType: "jsonp",
    success: readData(data),
    error: function (xhr, ajaxOptions, thrownError) {
      alert(xhr.status);
      alert(thrownError);
    }
})

작동 중인 3가지 솔루션을 만지작거립니다.

외부 JSON 지정:

myurl = 'http://wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=France&languages=zh-hans|zh-hant|fr&props=sitelinks|labels|aliases|descriptions&format=json'

솔루션 1: $.ajax() + jsonp:

$.ajax({
  dataType: "jsonp",
  url: myurl ,
  }).done(function ( data ) {
  // do my stuff
});

솔루션 2: $.syson()+json+&calback=?:

$.ajax({
  dataType: "json",
  url: myurl + '&callback=?',
  }).done(function ( data ) {
  // do my stuff
});

솔루션 3: $.getJSON()+calback=?:

$.getJSON( myurl + '&callback=?', function(data) {
  // do my stuff
});

문서: http://api.jquery.com/jQuery.ajax/ , http://api.jquery.com/jQuery.getJSON/

언급되지 않은 해결 방법을 찾았습니다.

다음은 이 문제에 대한 좋은 설명입니다.http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

기본적으로 양식/url 인코딩/일반 텍스트 내용 유형을 사용하면 됩니다.

$.ajax({
    type: "POST",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'text/plain'
    },
    dataType: "json",
    url: "http://localhost/endpoint",
    data: JSON.stringify({'DataToPost': 123}),
    success: function (data) {
        alert(JSON.stringify(data));
    }
});     

ASP와 함께 사용합니다.NET WebAPI2.그래서 다른 쪽에서는:

public static void RegisterWebApi(HttpConfiguration config)
{
    config.MapHttpAttributeRoutes();

    config.Formatters.Clear();
    config.Formatters.Add(new JsonMediaTypeFormatter());

    config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/plain"));
}

이렇게 하면 일반 텍스트 내용 유형을 구문 분석할 때 Json 포맷터가 사용됩니다.

Web.config를 잊지 마십시오.

<system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, POST" />
  </customHeaders>
</httpProtocol>    

이게 도움이 됐으면 좋겠다.

저는 WebAPI 3을 사용하고 있는데 같은 문제에 직면해 있었습니다.이 문제는 @Rytis가 솔루션을 추가함으로써 해결되었습니다.그리고 WebAPI 3에서는 방법을 정의할 필요가 없다고 생각합니다.RegisterWebApi.

변경은 web.config 파일에만 있었고, 정상적으로 동작하고 있습니다.

<httpProtocol>
 <customHeaders>
 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Methods" value="GET, POST" />
</customHeaders>
</httpProtocol> 

솔루션 @Rytis 감사합니다!

언급URL : https://stackoverflow.com/questions/3828982/xmlhttprequest-cannot-load-an-url-with-jquery