programing

요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 '...'은 액세스가 허용되지 않습니다.

lastmemo 2023. 2. 20. 23:52
반응형

요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 '...'은 액세스가 허용되지 않습니다.

.htaccess를 사용하여 URL을 다시 쓰고 있으며, 작동시키기 위해 html base 태그를 사용했습니다.

이제 Ajax 요청을 작성하려고 하면 다음 오류가 발생합니다.

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

사용 방법을 사용하는 대신

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

* 를 사용할 수 있습니다.


허용:

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

이 체크박스를 켜주세요.

오류가 발생하는 이유:

JavaScript 코드는 다음 페이지의 동일한 원본 정책에 의해 제한됩니다.www.example.com(AJAX) 요구는 같은 도메인에 있는 서비스에 대해서만 실행할 수 있습니다.이 경우, 정확하게는www.example.com(없음) example.com- 미포함www- 또는whatever.example.com).

당신의 경우, 당신의 Ajax 코드가 다음에서 서비스에 도달하려고 합니다.http://wordicious.com에 있는 페이지에서http://www.wordicious.com.

매우 유사하지만 동일한 도메인이 아닙니다.그리고 같은 도메인에 없는 경우 대상 응답에 다음 항목이 포함된 경우에만 요청이 성공합니다.Access-Control-Allow-Origin헤더가 포함되어 있습니다.

고객님의 페이지/서비스로서http://wordicious.com는, 이러한 헤더를 나타내도록 설정되어 있지 않습니다.이 에러 메세지가 표시됩니다.

솔루션:

앞서 설명한 바와 같이 원본 도메인(JavaScript가 있는 페이지 위치)과 대상 도메인(JavaScript가 도달하려는 위치)은 완전히 같아야 합니다.

당신의 케이스는 오타인 것 같습니다.처럼 보인다http://wordicious.com그리고.http://www.wordicious.com는, 실제로는 같은 서버/도메인입니다.수정하려면 타깃과 오리진을 동일하게 입력합니다.Ajax 코드 요청 페이지/서비스를 not로 만듭니다(타깃 URL을 상대적으로 배치합니다).'/login.php'(도메인 없음).



좀 더 일반적인 설명:

이 질문의 오타가 아닌 것으로 생각되는 경우는, 를 타겟 도메인에 추가하는 것이 해결책입니다.이 주소를 추가하는 방법은 물론 해당 주소 뒤에 있는 서버/언어에 따라 달라집니다.툴의 설정변수로 문제가 발생할 수 있습니다.코드를 통해 헤더를 직접 추가해야 하는 경우도 있습니다.

.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: *'); ?>

특히 JavaScript를 사용하여 Ajax 요청만 수행하는 경우에는 쿼리를 리모트서버로 전송하는 내부 프록시입니다.

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

그런 다음 프록시라는 간단한 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 헤더 응답을 변경합니다.

Access-Control-Allow-Credentials: true

액세스 제어 허가 발신지: *

그러나 보안에 관한 한 이 솔루션은 좋지 않습니다.

PHP 파일 또는 메인 컨트롤러에 추가

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

회피책은, 「소스」호스트상에서 실행되고 있는 역프록시를 사용해, Fiddler 와 같이 타겟 서버에 전송 하는 것입니다.

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

아니면 Apache Reverse 프록시...

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

언급URL : https://stackoverflow.com/questions/20433655/no-access-control-allow-origin-header-is-present-on-the-requested-resource-or

반응형