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

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

뉴스 웹사이트의 자료를 가져오려고 합니다.구글의 피드 API를 사용하여 피드 버너 피드를 json으로 변환하려고 합니다.다음 URL은 피드로부터 10개의 게시물을 json 형식으로 반환합니다.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'는 액세스가 허용되지 않습니다.

이거 어떻게 고쳐야 돼요?

구글 크롬 브라우저를 사용하면 확장자로 해킹할 수 있습니다.

응용 프로그램에서 CORS 헤더를 즉시 수정하는 Chrome 확장을 찾을 수 있습니다.Chrome만 있는 것은 틀림없지만, 어느 곳에서도 전혀 변화가 없는 것이 마음에 듭니다.

로컬 컴퓨터에서 앱을 디버깅하는 데 사용할 수 있습니다(모든 것이 프로덕션에서 작동하는 경우).

주의: URL이 깨진 경우 내선번호는 Access-Control-Allow-Origin: *. 예를 들어 youtube는 이 내선번호에서는 동작하지 않기 때문에 내선번호는 사용하지 않도록 설정할 것을 권장합니다.

Chrome은 을 지원하지 않을 입니다.localhost를 넘기다Access-Control-Allow-Origin-- Chrome 문제 참조

을 Chrome으로 Access-Control-Allow-Origin/etc/localhost hosthost localhost 。

127.0.0.1   localhost yourdomain.com

'하다'를 사용해서 yourdomain.comlocalhost콜이 성공합니다.

헤더를 다음과 같이 설정하여 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

cors unblock은 크롬78에 매우 적합합니다[ CORS unb ][ 1 ] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

구글 크롬을 위한 플러그인으로 "블록 해제"라고 합니다.

개요: 로컬 및 리모트 웹 요청에 "Access-Control-Allow-Origin: *" 헤더를 추가하여 CORS 오류를 해소합니다.

이 확장은 브라우저가 수신하는 모든 요구에 커스텀 "access-control-allow-origin" 및 "access-control-allow-methods" 헤더를 제공함으로써 XMLHtpRequest 및 fetch 메서드를 제어합니다.사용자는 툴바 버튼에서 내선번호를 켜거나 끌 수 있습니다.이러한 헤더의 변경 방법을 변경하려면 오른쪽 클릭 컨텍스트메뉴 항목을 사용합니다.허용되는 방법을 사용자 정의할 수 있습니다.기본 옵션은 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'OPTIONS', 'PATCH' 메서드를 허용하는 것입니다.또한 서버가 이미 헤더를 채웠을 때 이러한 헤더를 덮어쓰지 않도록 확장에 요청할 수도 있습니다.

하는 또 다른 은 다음과 를 메인 하는 것입니다. 이 클래스에는 다음과 같은 코드가 되어 있습니다.'@SpringBootApplication'이치노이건 나한테 효과가 있었어.

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
        corsConfiguration.setAllowedHeaders(Arrays.asList("Origin","Access-Control-Allow-Origin",
                "Content-Type","Accept","Authorization","Origin,Accept","X-Requested-With",
                "Access-Control-Request-Method","Access-Control-Request-Headers"));
        corsConfiguration.setExposedHeaders(Arrays.asList("Origin","Content-Type","Accept","Authorization",
                "Access-Control-Allow-Origin","Access-Control-Allow-Origin","Access-Control-Allow-Credentials"));
        corsConfiguration.setAllowedMethods(Arrays.asList("GET","PUT","POST","DELETE","OPTIONS"));
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
        
    }

참고로 jQuery 문서에서 이 정보를 확인했는데, 이 문제에 해당 정보는 다음과 같습니다.

브라우저 보안 제한으로 인해 대부분의 "Ajax" 요청은 동일한 원본 정책을 따릅니다. 요청은 다른 도메인, 하위 도메인, 포트 또는 프로토콜에서 데이터를 성공적으로 검색할 수 없습니다.

@thanix와 같은 호스트 파일을 변경하는 것은 효과가 없었지만, @dkruchok이 언급한 확장자로 문제가 해결되었습니다.

Chrome에서는 두 개의 다른 로컬 호스트를 통합할 수 없기 때문에 이 오류가 발생합니다. managernuget manager의 . 프로젝트의 2줄을 WebApi 합니다.WebApiConfig.csfilename을 클릭합니다.

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 proxy를 사용하는 것입니다.URL.so 전에 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: *

그 최초의 반응에 대해서요.

이 솔루션은 개발과 생산 모두에서 작동하기 때문에 매우 좋습니다.요약하자면, 동일한 원본 정책이 브라우저와 서버 간 통신에서만 구현된다는 사실을 이용하고 있는 것입니다.즉, 서버간 통신에서는 강제할 필요가 없습니다.

솔루션에 대한 자세한 내용은 여기를 참조하십시오.중간 3가지 방법으로 CORS 오류를 해결할 수 있습니다.

Express를 사용하는 경우
cors 사용 후 루트를 추가해 주세요.

app.use(filename());
app.use('/posts', postRoutes);

사용하세요@CrossOrigin에서backendside스프링 부트 컨트롤러(클래스 레벨 또는 메서드 레벨)에서 Chrome 오류 해결 방법'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

언급URL : https://stackoverflow.com/questions/28547288/no-access-control-allow-origin-header-is-present-on-the-requested-resource-err