it-swarm.com.de

Bei dem 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 die Feedburner-Feeds 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 zu erhalten

$.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 die folgende Fehlermeldung

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

Wie kann ich das beheben?

79
Aneeez

Ich glaube, dass dies wahrscheinlich ist, dass Chrome localhost nicht unterstützt, um den Access-Control-Allow-Origin - zu durchlaufen, siehe Chrome-Problem

Um Chrome Access-Control-Allow-Origin in der Kopfzeile senden zu lassen, geben Sie einfach Ihren localhost in Ihrer Datei/etc/hosts an eine andere Domäne an, wie:

127.0.0.1   localhost yourdomain.com

Wenn Sie dann mit yourdomain.com anstelle von localhost auf Ihr Skript zugreifen, sollte der Aufruf erfolgreich sein. 

76
thanix

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

Sie finden eine Chrome-Erweiterung , die CORS-Header in Ihrer Anwendung im Handumdrehen ändert. Offensichtlich ist dies nur Chrome, aber ich finde es gut, 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).

Notice: Wenn die URL beschädigt wird, lautet der Erweiterungsname Zugriffssteuerung-Zulassen-Herkunft: *. Ich empfehle Ihnen, diese Erweiterung zu deaktivieren, wenn Sie nicht an Ihren Sachen arbeiten, da youtube beispielsweise nicht mit dieser Erweiterung funktioniert.

98
dkruchok

Versuchen Sie dies - 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
9
Mackander Singh

Nur zur Information, ich habe diese Informationen aus der jQuery-Dokumentation zur Kenntnis genommen, die meines Erachtens auf dieses Problem zutrifft:

Aufgrund von Browser-Sicherheitsbeschränkungen unterliegen die meisten "Ajax" -Anforderungen der gleichen Origin-Richtlinie ; Die Anforderung kann keine Daten erfolgreich von einer anderen Domäne, Subdomain, einem anderen Port oder Protokoll abrufen.

Das Ändern der Hosts-Datei wie @thanix hat für mich nicht funktioniert, aber die von @dkruchok erwähnte Erweiterung löste das Problem.

1
vancy.pants

Für die Entwicklung können Sie https://cors-anywhere.herokuapp.com verwenden, für die Produktion ist es besser, Ihren 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();
0

Wenn es sich um einen Spring-Boot-Service handelt. Sie können damit umgehen, indem Sie den folgenden Code verwenden.

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