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

.htaccess를 사용하여 URL을 다시 작성하고 html 기본 태그를 사용하여 URL을 작동시킵니다.

이제 아약스 요청을하려고하면 다음 오류가 발생합니다.

XMLHttpRequest를로드 할 수 없습니다 http://www.example.com/login.php. 요청 된 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다. http://example.com따라서 원점 ' '은 액세스 할 수 없습니다.

사용 방법 addHeader대신에setHeader

response.addHeader("Access-Control-Allow-Origin", "*");

*위의 줄에서 허용 access to all domains됩니다.

허용 access to specific domain only:

response.addHeader("Access-Control-Allow-Origin", "http://www.example.com");

이것을 확인하십시오 blog post.

오류가 발생하는 이유 :

자바 스크립트 코드는에 의해 제한되는 동일 출처 정책 에서 페이지에서, 의미 www.example.com, 당신은 단지에있는 서비스 (AJAX) 요청 할 수 있습니다 정확히 정확하게,이 경우, 동일한 도메인을 www.example.com( 하지 example.com - 않고 www- 나 whatever.example.com).

귀하의 경우 Ajax 코드가에 http://wordicious.com있는 페이지에서 서비스를 받으려고합니다 http://www.wordicious.com.

매우 유사하지만 동일한 도메인 이 아닙니다 . 그리고 그들이 같은 도메인에 있지 않은 경우, 요청은 대상의 respose에 Access-Control-Allow-Origin헤더가 포함 된 경우에만 성공 합니다.

의 페이지 / 서비스 http://wordicious.com가 이러한 헤더를 표시하도록 구성되지 않았으므로 해당 오류 메시지가 표시됩니다.

해결책:

앞에서 설명한 것처럼 JavaScript가있는 페이지가있는 원점과 JavaScript가 도달하려는 대상 도메인이 정확히 같아야합니다.

당신의 경우는 오타처럼 보입니다. 모양 http://wordicious.com과 http://www.wordicious.com실제로는 동일한 서버 / 도메인입니다. 따라서 수정하려면 대상과 원점을 동일하게 입력하십시오. Ajax 코드 요청 페이지 / 서비스를 http://www.wordicious.com하지 말아야http://wordicious.com 합니다. ( '/login.php'도메인없이 타겟 URL을 상대적으로 배치하십시오 ).

보다 일반적인 참고 사항 :

문제가이 질문 중 하나와 같은 오타가 아닌 경우 해결책은 대상 도메인에 를 추가하는Access-Control-Allow-Origin 것 입니다. 물론 추가하려면 해당 주소 뒤에있는 서버 / 언어에 따라 다릅니다. 때로는 도구의 구성 변수가 트릭을 수행합니다. 다른 경우에는 코드를 통해 헤더를 직접 추가해야합니다.

.NET 서버의 경우 아래와 같이 web.config에서이를 구성 할 수 있습니다.

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="your_clientside_websiteurl" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

예를 들어 서버 도메인이 http://live.makemypublication.com 이고 클라이언트가 http://www.makemypublication.com 이면 서버의 web.config에서 아래와 같이 구성 하십시오.

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" />
     </customHeaders>
  </httpProtocol>
 </system.webServer>

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

요청 된 리소스에 '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 페이지 "login.php"의 시작 부분에 이것을 추가해야합니다

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

옵션 메소드 응답에 헤더 키 / 값을 넣어야합니다. 예를 들어 http://mydomain.com/myresource에 리소스 가 있으면 서버 코드에 다음을 작성하십시오.

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



}

기본적으로 다음 추가 매개 변수를 추가하여 API 헤더 응답을 변경하십시오.

액세스 제어 허용 자격 증명 : true

액세스 제어 허용 출처 : *

그러나 이것은 보안과 관련하여 좋은 해결책이 아닙니다.

해결 방법은 '소스'호스트에서 실행되고 Fiddler와 같은 대상 서버로 전달하는 리버스 프록시를 사용하는 것입니다.

여기 링크 : http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

또는 Apache Reverse 프록시 ...

PHP 파일 또는 메인 컨트롤러에 추가하십시오

header("Access-Control-Allow-Origin: http://localhost:9000");

httpd.conf의 아래 항목으로 해결되었습니다.

#CORS Issue
Header set X-Content-Type-Options "nosniff"
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PATCH"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,Content-Type,Origin,Authentication,Authorization,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control"
Header always set Access-Control-Allow-Credentials true

#CORS REWRITE
RewriteEngine On                  
RewriteCond %{REQUEST_METHOD} OPTIONS 
#RewriteRule ^(.*)$ $1 [R=200,L]
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]

플레어는 요청 헤더를 설정하기 위해 Javascript의 XMLHTTPREQUEST에 사용 된 함수를 찾습니다.

...

xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "http://www.example.com");
...
</script>

참조 : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader