오리진 http://localhost는 액세스-제어-허용-오리진에서 허용되지 않습니다.

오리진 http://localhost는 액세스-제어-허용-오리진에서 허용되지 않습니다.

나는 문제가 있습니다...저는 "http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json "에서 jsonapi를 얻으려고 노력합니다.

이 코드로 오프라인 모드를 시도할 때(즉, 메모장에 있는 json API를 복사하여 로컬 호스트에서 호출합니다)...

function getLast(){
        $.ajax({
            url:"http://localhost/tickets/json/api_airport.json",
            type:'GET',
            dataType:"json",
            success:function(data){console.log(data.results.result[1].category);}
        });
    }

완벽하게 작동합니다.:)

하지만 제가 이 코드로 URL("http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json ")을 실시간으로 하려고 할 때:

$.ajax({
            url:"http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json",
            type:'GET',
            crossDomain:true,
            beforeSend: function(x) {
                if(x && x.overrideMimeType) {
                    x.overrideMimeType("application/j-son;charset=UTF-8");
                }
            },
            success:function(data){console.log("Success");}
        });

그런 다음 Google Chrome Javascript 콘솔에 다음과 같은 오류가 있습니다. "XMLHttpRequest는 http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json 을 로드할 수 없습니다.출발지(http://localhost)는 액세스-제어-허용-출발지에서 허용되지 않습니다."

알아요, 그것은 도메인 간의 문제임에 틀림없어요, 누가 도와줄 수 있나요? nb: 코드 조각들, 나는 스택 오버플로 커뮤니티에서 받았어요… 감사합니다.

앞으로 나아갈 방법은 두 가지가 있습니다.

JSONP

---

이 API가 지원하는 경우JSONP이 문제를 해결하는 가장 쉬운 방법은 추가하는 것입니다.&callbackURL의 끝까지. 당신은 또한 시도할 수 있습니다.&callback=만약 그것이 작동하지 않는다면, 그것은 API가 지원하지 않는다는 것을 의미합니다.JSONP그래서 당신은 다른 해결책을 시도해야 합니다.

프록시 스크립트

---

교차 출처 문제를 방지하기 위해 웹 사이트와 동일한 도메인에 프록시 스크립트를 만들 수 있습니다.HTTPS URL이 아닌 HTTP URL에서만 작동하지만 필요한 경우 수정하는 것이 그리 어렵지 않습니다.

<?php
// File Name: proxy.php
if (!isset($_GET['url'])) {
    die(); // Don't do anything if we don't have a URL to work with
}
$url = urldecode($_GET['url']);
$url = 'http://' . str_replace('http://', '', $url); // Avoid accessing the file system
echo file_get_contents($url); // You should probably use cURL. The concept is the same though

그런 다음 jQuery로 이 스크립트를 호출합니다.반드시 해라urlencodeURL

$.ajax({
    url      : 'proxy.php?url=http%3A%2F%2Fapi.master18.tiket.com%2Fsearch%2Fautocomplete%2Fhotel%3Fq%3Dmah%26token%3D90d2fad44172390b11527557e6250e50%26secretkey%3D83e2f0484edbd2ad6fc9888c1e30ea44%26output%3Djson',
    type     : 'GET',
    dataType : 'json'
}).done(function(data) {
    console.log(data.results.result[1].category); // Do whatever you want here
});

이유

---

기본적으로 포트, 도메인 또는 프로토콜이 다른 URL에 대한 Ajax 요청 제한으로 귀결되는 XMLHttpRequest 동일한 오리진 정책 때문에 이 오류가 발생합니다.이 제한은 XSS(사이트 간 스크립팅) 공격을 방지하기 위해 적용됩니다.

추가 정보

우리의 해결책은 이러한 문제를 다른 방식으로 해결합니다.

JSONP는 JSON을 수신하기 위해 스크립트 태그를 JSON(javascript 함수로 감싼)에 가리키는 기능을 사용합니다.JSONP 페이지는 Javascript로 해석되어 실행됩니다.JSON은 지정된 기능으로 전달됩니다.

프록시 스크립트는 사용자의 페이지와 동일한 원본 페이지를 요청할 때 브라우저를 속여서 작동합니다.실제 교차 오리진 요청은 서버 측에서 발생합니다.

간단한 nginx 프록시로 (개발을 위해) 수정했습니다.

# /etc/nginx/sites-enabled/default
server {
  listen 80;
  root /path/to/Development/dir;
  index index.html;

  # from your example
  location /search {
    proxy_pass http://api.master18.tiket.com;
  }
}

jQuery AJAX 교차 도메인을 자세히 읽어보면 쿼리하는 서버가 교차 도메인 json 요청을 금지하는 헤더 문자열을 반환하고 있음을 알 수 있습니다.수신 중인 응답의 헤더를 확인하여 Access-Control-Allow-Origin 헤더가 설정되어 있는지 여부와 해당 값이 로컬 호스트에 대한 교차 도메인 요청을 제한하는지 여부를 확인합니다.

언급URL : https://stackoverflow.com/questions/12683530/origin-http-localhost-is-not-allowed-by-access-control-allow-origin