[javascript] 요청 된 리소스에 ‘Access-Control-Allow-Origin’헤더가 없습니다. 따라서 원점 ‘…’은 액세스 할 수 없습니다

브라우저에서이 오류 메시지가 표시되는 경우 :

요청 된 리소스에 ‘Access-Control-Allow-Origin’헤더가 없습니다. 따라서 원점 ‘…’은 액세스 할 수 없습니다

제어 할 수없는 원격 서버에 Ajax POST / GET 요청을 수행하려고 할 때이 간단한 수정 사항을 잊어 버리십시오.

<?php header('Access-Control-Allow-Origin: *'); ?>

특히 Ajax 요청을 수행하기 위해 JavaScript 만 사용하는 경우 실제로 수행해야하는 것은 쿼리를 가져 와서 원격 서버로 전송하는 내부 프록시입니다.

먼저 JavaScript에서 다음과 같은 자체 서버에 대한 Ajax 호출을 수행하십시오.

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async:false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

그런 다음, proxy.php라는 간단한 PHP 파일을 작성하여 POST 데이터를 랩핑하고이를 원격 URL 서버에 매개 변수로 추가하십시오. Expedia Hotel 검색 API에서이 문제를 우회하는 방법에 대한 예를 제공합니다.

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

함으로써 :

 echo json_encode(file_get_contents($url));

동일한 쿼리를 수행하지만 서버 측에서 수행 한 후 정상적으로 작동합니다.

답변

<?php header('Access-Control-Allow-Origin: *'); ?>

//response handler
void handleRequest(Request request, Response response) {
    if(request.method == "OPTIONS") {
       response.setHeader("Access-Control-Allow-Origin","http://clientDomain.com")
       response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
       response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    }



}