Brak nagłówka „Access-Control-Allow-Origin” w żądanym błędzie zasobu

Próbuję pobrać kanał witryny z wiadomościami. Pomyślałem, że użyję API kanału Google, aby przekonwertować kanał Feedburner na json. Poniższy adres URL zwróci 10 postów z kanału informacyjnego w formacie json. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

Użyłem następującego kodu, aby uzyskać zawartość powyższego adresu 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) {
    //.....
  }
});

ale to nie działa i pojawia się następujący błąd

XMLHttpRequest nie może załadować http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi . Żądany zasób nie zawiera nagłówka „Access-Control-Allow-Origin”. Dlatego źródło „ http: // localhost ” nie ma dostępu.

Jak to naprawić?

Wierzę, że ta moc może być to, że Chrome nie obsługuje localhostprzejść przez Access-Control-Allow-Origin- patrz wydania Chrome

Aby Chrome wysyłał Access-Control-Allow-Originw nagłówku, po prostu aliasuj swój localhost w pliku / etc / hosts do innej domeny, na przykład:

127.0.0.1   localhost yourdomain.com

Następnie, jeśli uzyskasz dostęp do skryptu za pomocą yourdomain.comzamiast localhost, wywołanie powinno się powieść.

Jeśli korzystasz z przeglądarki Google Chrome, możesz włamać się za pomocą rozszerzenia.

Możesz znaleźć rozszerzenie Chrome, które będzie modyfikować nagłówki CORS w locie w Twojej aplikacji. Oczywiście jest to tylko Chrome, ale podoba mi się, że działa bez żadnych zmian w dowolnym miejscu.

Możesz go użyć do debugowania aplikacji na komputerze lokalnym (jeśli wszystko działa w środowisku produkcyjnym).

Uwaga : jeśli adres URL zostanie uszkodzony, nazwa rozszerzenia to Access-Control-Allow-Origin: * . Zalecam wyłączenie tego rozszerzenia, gdy nie pracujesz nad swoimi rzeczami, ponieważ na przykład youtube nie działa z tym rozszerzeniem.

Spróbuj tego - ustaw wywołanie Ajax, ustawiając nagłówek w następujący sposób:

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);
    }                
});

Następnie uruchom kod, otwierając Chrome za pomocą następującego wiersza poleceń:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Do Twojej wiadomości, zauważyłem te informacje z dokumentacji jQuery, które moim zdaniem dotyczą tego problemu:

Ze względu na ograniczenia bezpieczeństwa przeglądarki większość żądań „Ajax” podlega tym samym zasadom pochodzenia ; żądanie nie może pomyślnie pobrać danych z innej domeny, subdomeny, portu lub protokołu.

Zmiana pliku hosts, takiego jak @thanix, nie działała dla mnie, ale rozszerzenie wspomniane przez @dkruchok rozwiązało problem.

Chrome nie pozwala na integrację dwóch różnych hostów lokalnych, dlatego otrzymujemy ten błąd. Wystarczy dołączyć pakiet Microsoft Visual Studio Web Api Core z menedżera NuGet i dodać do WebApiConfig.cs pliku dwie linie kodu w projekcie WebApi .

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Wtedy wszystko gotowe.

Jeśli wywołuje usługę rozruchu sprężynowego. poradzisz sobie z tym używając poniższego kodu.

@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);
        }
    };
}

Do programowania możesz użyć https://cors-anywhere.herokuapp.com , do produkcji lepiej jest skonfigurować własne proxy

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 działa świetnie na chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

to wtyczka do Google Chrome o nazwie „cors unblock”

Podsumowanie: koniec z błędami CORS przez dołączanie nagłówka „Access-Control-Allow-Origin: *” do lokalnych i zdalnych żądań internetowych, gdy jest włączony

To rozszerzenie zapewnia kontrolę nad XMLHttpRequest i metodami pobierania, dostarczając niestandardowe nagłówki „Access-control-allow-origin” i „access-control-allow-methods” do każdego żądania otrzymanego przez przeglądarkę. Użytkownik może włączać i wyłączać rozszerzenie za pomocą przycisku paska narzędzi. Aby zmodyfikować sposób zmiany tych nagłówków, użyj elementów menu kontekstowego wyświetlanego po kliknięciu prawym przyciskiem myszy. Możesz dostosować dozwolone metody. Domyślną opcją jest zezwolenie na metody „GET”, „PUT”, „POST”, „DELETE”, „HEAD”, „OPTIONS”, „PATCH”. Możesz również poprosić rozszerzenie, aby nie nadpisywało tych nagłówków, gdy serwer już je zapełni.

cóż, innym sposobem jest użycie proxy cors , wystarczy dodać https://cors-anywhere.herokuapp.com/ przed adresem URL, więc Twój adres URL będzie wyglądał jak https://cors-anywhere.herokuapp.com/http : //ajax.googleapis.com/ajax/services/feed/load .

Serwer proxy otrzymuje http://ajax.googleapis.com/ajax/services/feed/load z powyższego adresu URL. Następnie wysyła żądanie uzyskania odpowiedzi serwera. I wreszcie proxy stosuje rozszerzenie

Access-Control-Allow-Origin: *

na tę pierwotną odpowiedź.

To rozwiązanie jest świetne, ponieważ sprawdza się zarówno na etapie rozwoju, jak i produkcji. Podsumowując, wykorzystujesz fakt, że zasady tego samego pochodzenia są implementowane tylko w komunikacji między przeglądarką a serwerem. Co oznacza, że ​​nie musi być wymuszane w komunikacji serwer-serwer!

możesz przeczytać więcej o rozwiązaniu tutaj w Medium 3 Ways to Fix the CORS Error

Użyj @CrossOriginna backendsidekontrolerze rozruchu in Spring (na poziomie klasy lub metody), ponieważ rozwiązanie dla 'No 'Access-Control-Allow-Origin'nagłówka błędu Chrome jest obecne w żądanym zasobie. '

To rozwiązanie działa u mnie w 100% ...

Przykład: poziom klasy

@CrossOrigin
@Controller
public class UploadController {

----- LUB -------

Przykład: poziom metody

@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