파일:// URL에서 실행 중인 응용 프로그램에서 발생한 요청에 대한 "Origin null은 Access-Control-Allow-Origin에 의해 허용되지 않습니다" 오류입니다.
jQuery의 AJAX 지원을 통해 Flickr와 Panoramio에서 이미지를 끌어오는 페이지를 개발 중입니다.
만, Flickr를 하면,$.get(url, callback)Panoramio 크롬
XMLHttpRequest는 http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150을 로드할 수 없습니다.출발지 null은 Access-Control-Allow-Origin에서 허용되지 않습니다.
브라우저에서 직접 그 URL을 조회하면 정상적으로 동작합니다.무슨 일인데, 내가 이걸 피할 수 있을까?제가 질문을 잘못 작성했나요?아니면 Panoramio가 제가 하려는 일을 방해하고 있는 건가요?
구글은 이 오류 메시지에서 유용한 일치를 찾지 못했습니다.
편집
다음은 문제를 나타내는 샘플코드입니다.
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';
$.get(url, function (jsonp) {
var processImages = function (data) {
alert('ok');
};
eval(jsonp);
});
});
편집 2
다린이 도와줘서 고마워위 코드가 잘못되었습니다. 대신 다음을 사용하십시오.
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';
$.get(url, function (data) {
// can use 'data' in here...
});
});
분명히 말씀드리지만, 제가 아는 한 두 가지 문제가 있었습니다.
jsonp에 .
$.getXMLHttpRequest로 지정합니다.인 경우 도메인 는 CORS Sharing했습니다.「 OK 」 、 「 XMLHttpRequest 」 、 「 Cross-Origin Resource Sharing 」서부터가 중요한Access-Control-Allow-Origin헤더가 들어왔습니다.에서 .CORS 헤더가 크로스 도메인 XHR이 정상임을 나타내는 데는 두 가지 방법이 있습니다.하나는 보내는 것이다.
Access-Control-Allow-Origin: *를 통해 에 )$.get)는 반면, 다른 하나는 'Origin머리글 ★★★★★★★★★★★★★★.file://은 늘 URL을 합니다.Origin에코백을 통해 승인될 수 없습니다.
되었다.$.getJSON. 'json'이 인 '에서 '로callback=?참조해 주세요.
이것에 , 는, 「COS 」를 「」로부터.file://URL이 되다.
다른 사용자를 위해 간단한 트러블 슈팅 순서를 다음에 나타냅니다.
- JSONP 를 사용하는 경우는, 다음의 어느쪽인가를 확인해 주세요.
- 있어요
$.get로 설정하다jsonp. - 있어요
$.getJSON★★★callback=?참조해 주세요.
- 있어요
- CORS "XMLHttpRequest" "XMLHttpRequest"...
호출된 스크립트에 헤더를 추가해야 할 수도 있습니다. PHP에서 해야 했던 작업은 다음과 같습니다.
header('Access-Control-Allow-Origin: *');
자세한 내용은 크로스 도메인 AJAX ou 서비스 WEB(프랑스어)를 참조하십시오.
간단한 HTML 프로젝트의 경우:
cd project
python -m SimpleHTTPServer 8000
그런 다음 파일을 찾아보십시오.
Google Chrome v5.0.375.127에서 작동합니다(경보가 표시됨).
$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
alert(json.photos[1].photoUrl);
});
또, IE8(최소한의 제 머신에서는)에서는 동작하지 않기 때문에, 그 대신에 이 방법을 사용하는 것을 추천합니다.
$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
alert(json.photos[1].photoUrl);
});
여기서부터 온라인으로 시도해 보세요.
갱신:
코드를 보여주셨기 때문에 문제가 있음을 알 수 있습니다. 가지고 둘 다 어나니머스 함수로 .processImagesjQuery JSONP.「」의 정의 .callback=?익명 기능을 사용할 수 있습니다.상세한 것에 대하여는, 메뉴얼을 참조해 주세요.
또 다른 말은 평가 전화를 걸면 안 된다는 것입니다.익명 함수에 전달된 파라미터는 jQuery에 의해 이미 JSON으로 해석됩니다.
요청된 서버가 JSON 데이터 형식을 지원하는 한 JSONP(JSON Padding) 인터페이스를 사용합니다.프록시 서버나 고급 헤더 없이 외부 도메인 요청을 만들 수 있습니다.
.file://브라우저 보안을 해제해야 합니다.
의 경우: MAC의 경우:open -a Google\ Chrome --args --disable-web-security
같은 오리진 정책입니다.같은 호스트에서 실행되는 JSON-P 인터페이스 또는 프록시를 사용해야 합니다.
는 그것을 이 the the 로 했다.http.conf 서비스 후
<Directory "/home/the directory_where_your_serverside_pages_is">
Header set Access-Control-Allow-Origin "*"
AllowOverride all
Order allow,deny
Allow from all
</Directory>
서서 Header set Access-Control-Allow-Origin "*"【URL】【URL 。
내 경우, 파이어폭스에서는 같은 코드가 정상적으로 동작했지만, 구글 크롬에서는 동작하지 않았습니다.Google Chrome의 JavaScript 콘솔에는 다음과 같이 표시됩니다.
XMLHttpRequest cannot load http://www.xyz.com/getZipInfo.php?zip=11234.
Origin http://xyz.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"
Ajax URL의 www 부분을 삭제해야 오리진 URL과 올바르게 일치할 수 있었고, 그 때는 정상적으로 동작했습니다.
마지막으로 Mozilla 문서에는 다음과 같이 명시되어 있습니다.
위의 예는 헤더가 와일드카드인 경우 실패합니다.Access-Control-Allow-Origin: *. Access-Control-Allow-Origin은 명시적으로 http://foo.example을 언급하고 있기 때문에 credential-cognant 콘텐츠는 호출 웹 콘텐츠로 돌아갑니다.
따라서 단순히 '*'를 사용하는 것이 나쁜 방법은 아닙니다.단순히 기능하지 않는다:)
모든 서버가 jsonp를 지원하는 것은 아닙니다.서버가 결과에 콜백 함수를 설정해야 합니다.순수 json을 반환하지만 jsonp를 지원하지 않는 사이트에서 json 응답을 얻기 위해 사용합니다.
function AjaxFeed(){
return $.ajax({
url: 'http://somesite.com/somejsonfile.php',
data: {something: true},
dataType: 'jsonp',
/* Very important */
contentType: 'application/json',
});
}
function GetData() {
AjaxFeed()
/* Everything worked okay. Hooray */
.done(function(data){
return data;
})
/* Okay jQuery is stupid manually fix things */
.fail(function(jqXHR) {
/* Build HTML and update */
var data = jQuery.parseJSON(jqXHR.responseText);
return data;
});
}
Apache 서버를 사용하고 있기 때문에 mod_proxy 모듈을 사용하고 있습니다.모듈 활성화:
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
그 후 다음을 추가합니다.
ProxyPass /your-proxy-url/ http://service-url:serviceport/
마지막으로 proxy-url을 스크립트에 전달합니다.
PHP의 경우 - Chrome, safari 및 Firefox에서 사용할 수 있습니다.
header('Access-Control-Allow-Origin: null');
axios를 사용하여 파일을 사용하여 php 라이브 서비스를 호출합니다.//
Chrome에서도 같은 에러가 발생했습니다(다른 브라우저는 테스트하지 않았습니다).www.domain.com이 아닌 domain.com에서 네비게이트를 하고 있었기 때문입니다.조금 이상하지만 .htaccess에 다음 행을 추가하면 문제를 해결할 수 있습니다.domain.com 에서 www.domain.com 로 리다이렉트 되어 문제가 해결되었습니다.저는 느긋한 웹 방문자이기 때문에 www를 거의 입력하지 않습니다만, 경우에 따라서는 필요한 경우도 있는 것 같습니다.
RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]
최신 버전의 JQuery를 사용하고 있는지 확인합니다.이 에러는 JQuery 1.10.2에서 발생하고 있으며, JQuery 1.11.1을 사용한 후에 해결되었습니다.
여러분,
저도 비슷한 문제에 부딪혔어요.하지만 Fiddler를 사용하여 문제를 해결할 수 있었습니다.문제는 Web API 측의 CORS 구현으로 설정되어 있는 클라이언트 URL에 후행 슬래시가 없어야 한다는 것입니다.Google Chrome을 통해 요청을 제출하고 Fiddler의 Headers 섹션의 TextView 탭을 검사하면 다음과 같은 오류 메시지가 나타납니다.
*"지정된 정책 오리진 your_client_url:/'이 잘못되었습니다.슬래시로 끝날 수 없습니다."
Internet Explorer에서는 문제없이 동작했지만 Google Chrome을 사용하여 테스트할 때는 골치가 아팠기 때문에 매우 이상했습니다.
CORS 코드의 Forward-slash를 삭제하고 Web API를 재컴파일하여 Chrome과 Internet Explorer에서 문제없이 API에 접속할 수 있게 되었습니다.한 번 시도해 보세요.
고마워, 앤디
위의 CodeGroover가 게시한 솔루션에는 약간의 문제가 있습니다.파일을 변경하면 서버를 재부팅하여 갱신된 파일을 실제로 사용해야 합니다(적어도 제 경우).
그래서 좀 검색하다가 이걸 찾았어요
sudo npm -g install simple-http-server # to install
nserver # to use
그리고 나서 그것은 다음에서 사용될 것이다.http://localhost:8000.
언급URL : https://stackoverflow.com/questions/3595515/origin-null-is-not-allowed-by-access-control-allow-origin-error-for-request-ma
'programing' 카테고리의 다른 글
| urlib 및 python을 통한 사진 다운로드 (0) | 2022.09.05 |
|---|---|
| PHP에서 @ 기호의 용도는 무엇입니까? (0) | 2022.09.05 |
| MYSQL 범위가 작동하지 않음 (0) | 2022.09.04 |
| php/SQL이 NULL을 반환합니다. (0) | 2022.09.04 |
| MySQL에서 일련의 레코드를 한 번에 삭제하려면 어떻게 해야 합니까? (0) | 2022.09.04 |