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.

웹 페이지를 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이 콜백 함수를 호출하는 유효한 자바 스크립트 파일을 반환하는지 확인합니다. 일부 서비스는이를 지원합니다 (그리고 GET 매개 변수에서 콜백 이름을 지정할 수 있음).

다른 쉬운 방법은 로컬 서버에 "프록시"를 만들어 원격 요청을받은 다음 자바 스크립트로 다시 "전달"하는 것입니다.

편집 / 추가 :

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

Solution 2: $.ajax()+json+&calback=?:

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

Solution 3: $.getJSON()+calback=?:

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

Documentations: http://api.jquery.com/jQuery.ajax/ , http://api.jquery.com/jQuery.getJSON/

---

Found a possible workaround that I don't believe was mentioned.

Here is a good description of the problem: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Basically as long as you use forms/url-encoded/plain text content types you are fine.

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

I use it with ASP.NET WebAPI2. So on the other end:

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

This way Json formatter gets used when parsing plain text content type.

And don't forget in Web.config:

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

Hope this helps.

---

I am using WebAPI 3 and was facing the same issue. The issue has resolve as @Rytis added his solution. And I think in WebAPI 3, we don't need to define method RegisterWebApi.

My change was only in web.config file and is working.

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

Thanks for you solution @Rytis!

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