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

뉴스 웹 사이트의 피드를 가져 오려고합니다. 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();

cors unblock은 chrome 78에서 잘 작동합니다. [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

"cors unblock"이라는 Google 크롬 용 플러그인입니다.

요약: 활성화 된 경우 로컬 및 원격 웹 요청에 'Access-Control-Allow-Origin : *'헤더를 추가하여 더 이상 CORS 오류가 발생하지 않습니다.

이 확장은 브라우저가 수신하는 모든 요청에 ​​사용자 정의 "access-control-allow-origin"및 "access-control-allow-methods"헤더를 제공하여 XMLHttpRequest 및 fetch 메소드를 제어합니다. 사용자는 도구 모음 버튼에서 확장 기능을 켜고 끌 수 있습니다. 이러한 헤더가 변경되는 방식을 수정하려면 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴 항목을 사용하십시오. 허용되는 방법을 사용자 지정할 수 있습니다. 기본 옵션은 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'OPTIONS', 'PATCH'메소드를 허용하는 것입니다. 서버가 이미 헤더를 채울 때 이러한 헤더를 덮어 쓰지 않도록 확장 프로그램에 요청할 수도 있습니다.

음, 또 다른 방법은 cors 프록시를 사용하는 것입니다. URL 앞에 https://cors-anywhere.herokuapp.com/ 을 추가 하면됩니다. 따라서 URL은 https://cors-anywhere.herokuapp.com/http 와 같습니다. : //ajax.googleapis.com/ajax/services/feed/load .

프록시 서버는 위의 URL 에서 http://ajax.googleapis.com/ajax/services/feed/load 를 수신합니다 . 그런 다음 해당 서버의 응답을 요청합니다. 마지막으로 프록시는

Access-Control-Allow-Origin: *

그 원래 응답에.

이 솔루션은 개발과 생산 모두에서 작동하기 때문에 훌륭합니다. 요약하면 동일 출처 정책이 브라우저 대 서버 통신에서만 구현된다는 사실을 활용하고 있습니다. 즉, 서버 간 통신에 적용 할 필요가 없습니다!

CORS 오류를 수정하는 중간 3 가지 방법 에서 솔루션에 대한 자세한 내용을 읽을 수 있습니다.

사용하십시오 @CrossOrigin온 backendside크롬 오류에 대한 해결책으로 봄 부팅 컨트롤러 (중 클래스 수준 또는 메서드 수준)에 'No 'Access-Control-Allow-Origin'헤더가 요청 된 자원에 존재합니다. '

이 솔루션은 저에게 100 % 효과가 있습니다.

예 : 클래스 수준

@CrossOrigin
@Controller
public class UploadController {

----- 또는 -------

예 : 방법 수준

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RequestMapping(value = "/loadAllCars")
    @ResponseBody
    public List<Car> loadAllCars() {


Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework