요청된 리소스에 '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
'programing' 카테고리의 다른 글
워드프레스에서 현재 로그인한 사용자의 역할을 가져오려면 어떻게 해야 합니까? (0) | 2023.02.20 |
---|---|
AngularJS 코어 vs각도 JS Nuget 패키지? (0) | 2023.02.20 |
TypeScript에서 Singleton을 정의하는 방법 (0) | 2023.02.20 |
스프링 부트를 사용하여 Java 속성 파일에서 데이터를 읽는 방법 (0) | 2023.02.20 |
angular.js에서 키 다운 또는 키 누르기 이벤트를 감지하려면 어떻게 해야 합니까? (0) | 2023.02.20 |