Für den angeforderten Ressourcenfehler ist kein Header 'Access-Control-Allow-Origin' vorhanden

Ich versuche, den Feed einer Nachrichten-Website abzurufen. Ich dachte, ich würde die Feed-API von Google verwenden, um den Feedburner-Feed in JSON zu konvertieren. Die folgende URL gibt 10 Beiträge aus dem Feed im JSON-Format zurück. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

Ich habe den folgenden Code verwendet, um den Inhalt der obigen URL abzurufen

$.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) {
    //.....
  }
});

aber es funktioniert nicht und ich erhalte den folgenden Fehler

XMLHttpRequest kann http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi nicht laden . In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin ' http: // localhost ' ist daher kein Zugriff gestattet.

Wie behebe ich das?

Ich glaube , dies könnte wahrscheinlich sein , dass Chrome nicht unterstützt , localhostum durch die Access-Control-Allow-Origin- siehe Chrome Ausgabe

Um Chrome Access-Control-Allow-Originin den Header zu senden , müssen Sie Ihren lokalen Host in Ihrer Datei / etc / hosts einfach an eine andere Domain aliasen, z.

127.0.0.1   localhost yourdomain.com

Dann , wenn Sie Ihren Skript zugreifen würden yourdomain.comstatt localhost, soll der Aufruf erfolgreich.

Wenn Sie den Google Chrome-Browser verwenden, können Sie mit einer Erweiterung hacken.

In Ihrer Anwendung finden Sie eine Chrome-Erweiterung , mit der CORS-Header im laufenden Betrieb geändert werden können. Natürlich ist dies nur Chrome, aber ich mag es, dass es überall ohne Änderungen funktioniert.

Sie können es zum Debuggen Ihrer App auf einem lokalen Computer verwenden (wenn in der Produktion alles funktioniert).

Hinweis : Wenn die URL beschädigt wird, lautet der Name der Erweiterung Access-Control-Allow-Origin: * . Ich empfehle dir, diese Erweiterung zu deaktivieren, wenn du nicht an deinen Sachen arbeitest, weil beispielsweise YouTube mit dieser Erweiterung nicht funktioniert.

Versuchen Sie Folgendes: Setzen Sie den Ajax-Aufruf, indem Sie den Header wie folgt einrichten:

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

Führen Sie dann Ihren Code aus, indem Sie Chrome mit der folgenden Befehlszeile öffnen:

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

Nur zu Ihrer Information, ich habe diese Informationen aus der jQuery-Dokumentation bemerkt, von denen ich glaube, dass sie für dieses Problem gelten:

Aufgrund von Sicherheitsbeschränkungen des Browsers unterliegen die meisten "Ajax" -Anfragen derselben Ursprungsrichtlinie . Die Anforderung kann Daten aus einer anderen Domäne, Subdomäne, einem anderen Port oder einem anderen Protokoll nicht erfolgreich abrufen.

Das Ändern der Hosts-Datei wie @thanix hat bei mir nicht funktioniert, aber die von @dkruchok erwähnte Erweiterung hat das Problem gelöst.

In Chrome können Sie nicht zwei verschiedene localhost integrieren. Deshalb wird dieser Fehler angezeigt. Sie müssen nur das Microsoft Visual Studio Web Api Core-Paket vom Nuget Manager einbinden. Fügen Sie die beiden Codezeilen in den WebApi-Projekten in Ihre WebApiConfig.cs Datei ein.

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

Dann ist alles erledigt.

Wenn es Spring Boot Service aufruft. Sie können damit mit dem folgenden Code umgehen.

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

Für die Entwicklung können Sie https://cors-anywhere.herokuapp.com verwenden . Für die Produktion ist es besser, einen eigenen Proxy einzurichten

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 funktioniert hervorragend für Chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

Es ist ein Plugin für Google Chrome namens "cors unblock".

Zusammenfassung: Kein CORS-Fehler mehr durch Anhängen des Headers 'Access-Control-Allow-Origin: *' an lokale und Remote-Webanforderungen, wenn diese aktiviert sind

Diese Erweiterung bietet Kontrolle über XMLHttpRequest- und Abrufmethoden, indem für jede Anforderung, die der Browser empfängt, benutzerdefinierte Header "Zugriffssteuerungs-Zulassungsursprung" und "Zugriffssteuerungs-Zulassungsmethoden" bereitgestellt werden. Ein Benutzer kann die Erweiterung über die Symbolleistenschaltfläche ein- und ausschalten. Verwenden Sie die Kontextmenüelemente mit der rechten Maustaste, um zu ändern, wie diese Überschriften geändert werden. Sie können anpassen, welche Methoden zulässig sind. Die Standardoption besteht darin, die Methoden 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'OPTIONS' und 'PATCH' zuzulassen. Sie können die Erweiterung auch bitten, diese Header nicht zu überschreiben, wenn der Server sie bereits füllt.

Nun , eine andere Möglichkeit ist, dass Sie bei Verwendung des Cors-Proxys nur https://cors-anywhere.herokuapp.com/ hinzufügen müssen, bevor Ihre URL lautet. So wird Ihre URL aussehen https://cors-anywhere.herokuapp.com/http : //ajax.googleapis.com/ajax/services/feed/load .

Der Proxyserver erhält die http://ajax.googleapis.com/ajax/services/feed/load von der oben angegebenen URL. Dann wird die Anfrage gestellt, um die Antwort dieses Servers zu erhalten. Und schließlich wendet der Proxy die

Access-Control-Allow-Origin: *

auf diese ursprüngliche Antwort.

Diese Lösung ist großartig, da sie sowohl in der Entwicklung als auch in der Produktion funktioniert. Zusammenfassend nutzen Sie die Tatsache, dass die Richtlinie mit demselben Ursprung nur in der Kommunikation zwischen Browser und Server implementiert ist. Das heißt, es muss nicht in der Server-zu-Server-Kommunikation erzwungen werden!

Weitere Informationen zur Lösung finden Sie hier auf Medium 3 Möglichkeiten zur Behebung des CORS-Fehlers

Bitte verwenden Sie @CrossOriginauf dem backendsideIn-Spring-Boot-Controller (entweder Klassen- oder Methodenebene), da die Lösung für den Chrome- 'No 'Access-Control-Allow-Origin'Fehlerheader in der angeforderten Ressource vorhanden ist. '

Diese Lösung funktioniert bei mir zu 100% ...

Beispiel: Klassenstufe

@CrossOrigin
@Controller
public class UploadController {

----- ODER -------

Beispiel: Methodenebene

@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