뉴스 웹 사이트의 피드를 가져 오려고합니다. Google의 피드 API를 사용하여 feedburner 피드를 json으로 변환 할 것이라고 생각했습니다. 다음 URL은 json 형식으로 피드에서 10 개의 게시물을 반환합니다. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi
위 URL의 내용을 가져 오기 위해 다음 코드를 사용했습니다.
$.ajax({
type: "GET",
dataType: "jsonp",
url: "http://ajax.googleapis.com/ajax/services/feed/load",
data: {
"v": "1.0",
"num": "10",
"q": "http://feeds.feedburner.com/mathrubhumi"
},
success: function(result) {
//.....
}
});하지만 작동하지 않고 다음과 같은 오류가 발생합니다.
XMLHttpRequest는 http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi를 로드 할 수 없습니다
. 요청 된 리소스에 ‘Access-Control-Allow-Origin’헤더가 없습니다. 따라서 원본 ‘ http : // localhost ‘는 액세스가 허용되지 않습니다.
이 문제를 어떻게 해결합니까?
답변
나는이 힘 가능성이 크롬은 지원하지 않습니다 할 생각 localhost관통 이동 Access-Control-Allow-Origin– 참조 크롬 문제
Chrome Access-Control-Allow-Origin이 헤더를 보내도록하려면 / etc / hosts 파일의 localhost를 다음과 같은 다른 도메인으로 별칭을 지정하면됩니다.
127.0.0.1 localhost yourdomain.com그런 다음 yourdomain.com대신을 사용하여 스크립트에 액세스 localhost하면 호출이 성공합니다.
답변
Google 크롬 브라우저를 사용하는 경우 확장 프로그램으로 해킹 할 수 있습니다.
애플리케이션에서 즉시 CORS 헤더를 수정 하는 Chrome 확장 프로그램 을 찾을 수 있습니다 . 분명히 이것은 Chrome 전용이지만 전혀 변경 사항이 전혀없이 작동하는 것이 좋습니다.
로컬 머신에서 앱을 디버깅하는 데 사용할 수 있습니다 (모든 것이 프로덕션에서 작동하는 경우).
참고 : URL이 깨지면 확장 이름은 Access-Control-Allow-Origin : * 입니다. 예를 들어 youtube는이 확장 프로그램에서 작동하지 않기 때문에 작업하지 않을 때는이 확장 프로그램을 비활성화하는 것이 좋습니다.
답변
이것을 시도하십시오-다음과 같이 헤더를 설정하여 Ajax 호출을 설정하십시오.
var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
url: uri,
beforeSend: function (request) {
request.setRequestHeader("Authorization", "Negotiate");
},
async: true,
success: function (data) {
alert(JSON.stringify(data));
},
error: function (xhr, textStatus, errorMessage) {
alert(errorMessage);
}
});그런 다음 다음 명령 줄로 Chrome을 열어 코드를 실행합니다.
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security답변
참고로이 문제에 적용되는 jQuery 문서에서이 정보를 발견했습니다.
브라우저 보안 제한으로 인해 대부분의 “Ajax”요청에는 동일한 출처 정책 이 적용됩니다 . 요청이 다른 도메인, 하위 도메인, 포트 또는 프로토콜에서 데이터를 성공적으로 검색 할 수 없습니다.
@thanix와 같은 호스트 파일을 변경하는 것은 저에게 효과가 없었지만 @dkruchok에서 언급 한 확장명이 문제를 해결했습니다.
답변
Chrome에서는 두 개의 서로 다른 로컬 호스트를 통합 할 수 없으므로이 오류가 발생합니다. Nuget Manager의 Microsoft Visual Studio Web Api Core 패키지를 포함하고 WebApiConfig.cs 파일 의 WebApi 프로젝트에 두 줄의 코드를 추가하기 만하면 됩니다.
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);그런 다음 모두 완료되었습니다.
답변
봄 부팅 서비스를 호출하는 경우. 아래 코드를 사용하여 처리 할 수 있습니다.
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS")
.allowedHeaders("*", "Access-Control-Allow-Headers", "origin", "Content-type", "accept", "x-requested-with", "x-requested-by") //What is this for?
.allowCredentials(true);
}
};
}답변
개발의 경우 https://cors-anywhere.herokuapp.com 을 사용할 수 있으며 프로덕션의 경우 자체 프록시를 설정하는 것이 좋습니다.
async function read() {
let r= await (await fetch('https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi')).json();
console.log(r);
}
read();