IT

요청 된 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다.

lottoking 2020. 6. 26. 07:52
반응형

요청 된 리소스에 '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.comhttp://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));

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


You need to add this at start of your php page "login.php"

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

you have to put the headers keys/values in options method response. for example if you have resource at http://mydomain.com/myresource then, in your server code you write

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



}

Basically alter API header response by adding following additional parameters.

Access-Control-Allow-Credentials: true

Access-Control-Allow-Origin: *

But this is not good solution when it comes to the security


The workaround is to use a reverse proxy running on your 'source' host and forwarding to your target server, such as Fiddler:

Link here: http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

Or an Apache Reverse proxy...


Add this to you PHP file or main controller

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

Solved with below entry in 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}]]

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

반응형