jQuery XML 오류 ' 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.
http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml에 있는 xml 파일을 읽고 xml을 구문 분석하여 통화 간의 가치를 변환하는 데 사용하는 개인 프로젝트를 재미삼아 진행하고 있습니다.
지금까지 XML을 읽기 위해 매우 기본적인 아래의 코드를 생각해 냈지만 다음과 같은 오류가 발생합니다.
XMLHttpRequest는 ****를 로드할 수 없습니다.요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'http://run.jsbin.com'에 액세스할 수 없습니다.
$(document).ready(
function() {
$.ajax({
type: 'GET',
url: 'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml',
dataType: 'xml',
success: function(xml){
alert('aaa');
}
});
}
);
코드에는 아무런 문제가 없다고 생각되기 때문에 코드에는 어떤 문제가 있는지, 어떻게 고칠 수 있는지 누군가 지적해 주셨으면 합니다.
AJAX 전화는 할 수 없습니다.http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml
에서 전개된 파일에서http://run.jsbin.com
같은 정책 때문입니다.
송신원(origin) 페이지와 타겟 URL이 다른 도메인에 있기 때문에(run.jsbin.com
그리고.www.ecb.europa.eu
Cross-Domain(CORS; 크로스 도메인) 요구를 실제로 시도하고 있습니다.일반적인 요구는 아닙니다.GET
.
즉, 같은 발신기지 정책에서는 브라우저는 HTML 페이지의 같은 도메인에 있는 서비스에 대한 Ajax 콜만 허용해야 합니다.
예:
페이지:http://www.example.com/myPage.html
에 있는 서비스만 직접 요청할 수 있습니다.http://www.example.com
,맘에 들다http://www.example.com/api/myService
서비스가 다른 도메인에서 호스트되는 경우(예:http://www.ok.com/api/myService
브라우저는 (예상대로) 직접 콜을 발신하지 않습니다.대신 CORS 요청을 시도합니다.
간단히 말하면, 다른 도메인 간에 (CORS) 요청*을 실행하려면 브라우저에서 다음을 수행합니다.
- 포함하다
Origin
(페이지 도메인을 값으로 하여) 원래 요청의 헤더와 통상대로 수행합니다. - 이 요구에 대한 서버 응답에 CORS 요구를 허가하는 적절한
Access-Control-Allow-Origin
헤더가 포함되어 있는 경우(그 중 하나), 브라우즈에서는 콜이 완료됩니다(HTML 페이지가 같은 도메인에 있는 경우와 거의 동일).- 예상된 헤더가 도착하지 않으면 브라우저는 단순히 포기합니다(사용자에게 했던 것처럼).
* 위는 일반 요청과 같은 간단한 요청 단계를 나타냅니다.GET
하지 않은(「」와 같이):POST
application/json
를이하기 전에, 「」를 합니다.OPTIONS
이 URL에이 있을 됩니다. 위와 같이, 이 URL에 대한 응답이 있을 경우에만 계속됩니다.OPTIONS
headers.request가 되어 있습니다. ★★★★★★★★★★★★★★★★★.OPTIONS
콜은 프리플라이트 요구라고 불립니다.
** 일반 통화와 CORS 통화에는 다른 점이 있기 때문에 말하는 것입니다.중요한 것은 일부 헤더가 응답에 있더라도 헤더에 포함되지 않으면 브라우저에 의해 선택되지 않는다는 것입니다.
어떻게 고치죠?
그냥 오타였나요?JavaScript 코드가 대상 도메인에 오타가 있을 수 있습니다.확인하셨나요?페이지가 다음 위치에 있는 경우www.example.com
에의 통상의 콜만 발신됩니다.www.example.com
:api.example.com
또는 심지어example.com
★★★★★★★★★★★★★★★★★」www.example.com:8080
브라우저에 의해 다른 도메인으로 간주됩니다.네, 포트가 다르면 다른 도메인입니다!
헤더를 추가합니다.CORS 를 유효하게 하는 가장 간단한 방법은, 필요한 헤더를 추가하는 것입니다.Access-Control-Allow-Origin
(서버/언어마다 방법이 있습니다.여기서 몇 가지 솔루션을 확인해 주세요.)
마지막 수단:서비스에 대한 서버 측 액세스 권한이 없는 경우 역방향 프록시 등의 도구를 통해 서비스를 미러링하고 필요한 모든 헤더를 포함할 수도 있습니다.
서버에서 php가 활성화 되어 있는 경우, 해킹에 의한 방법이 있습니다.다음 행 변경:
url: 'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml',
다음 행으로 이동합니다.
url: '/path/to/phpscript.php',
그런 다음 php 스크립트(file_get_private() 함수를 사용할 권한이 있는 경우):
<?php
header('Content-type: application/xml');
echo file_get_contents("http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml");
?>
Php는 그 URL이 다른 출처에서 온 것이라도 상관하지 않는 것 같습니다.말씀드렸듯이, 이건 진부한 대답입니다. 뭔가 잘못된 게 분명합니다. 하지만 제게는 효과가 있습니다.
편집: 결과를 php로 캐시하려면 다음 php 파일을 사용합니다.
<?php
$cacheName = 'somefile.xml.cache';
// generate the cache version if it doesn't exist or it's too old!
$ageInSeconds = 3600; // one hour
if(!file_exists($cacheName) || filemtime($cacheName) > time() + $ageInSeconds) {
$contents = file_get_contents('http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml');
file_put_contents($cacheName, $contents);
}
$xml = simplexml_load_file($cacheName);
header('Content-type: application/xml');
echo $xml;
?>
여기서부터 캐싱 코드를 가져갑니다.
언급URL : https://stackoverflow.com/questions/19821753/jquery-xml-error-no-access-control-allow-origin-header-is-present-on-the-req
'source' 카테고리의 다른 글
스프링 부팅에서 애플리케이션 컨텍스트를 사용하여 빈을 얻는 방법 (0) | 2023.02.13 |
---|---|
불필요한 이스케이프 문자 비활성화: \/ no-use-escape (0) | 2023.02.13 |
Angular ui-router에서 중첩된 상태의 URL이 변경되었지만 템플릿이 로드되지 않습니다. (0) | 2023.02.13 |
리액트 앱의 setInterval (0) | 2023.02.13 |
$.ajax가 포함된 쿼리 문자열 대신 JSON을 전송하려면 어떻게 해야 합니까? (0) | 2023.02.13 |