So lösen Sie "Die Weiterleitung wurde durch die CORS-Richtlinie blockiert: Kein" Access-Control-Allow-Origin "-Header"?

Ich arbeite an einer App mit Vue js. Entsprechend meiner Einstellung muss ich beim Festlegen der Änderung eine Variable an meine URL übergeben.

<!-- language: lang-js -->

    $.get('http://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) { 
      // some code...
    });

Wenn meine App jedoch auf URL klickt, wird die folgende Meldung angezeigt.

Failed to load http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26: Redirect from 'http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26' to 'http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Zusätzlich zu dem, was awd erwähnt hat, um die für den Server verantwortliche Person zur Neukonfiguration zu bewegen (eine unpraktische Lösung für die lokale Entwicklung), verwende ich ein Chrome-Plugin mit Änderungsursprung wie folgt:

Moesif Orign & CORS Wechsler

Sie können Ihren local dev server (ex: localhost:8080)Eindruck erwecken , als käme er von 172.16.1.157:8002 or any other domain.

Vielen Dank an alle, ich habe durch diese Erweiterung auf Chrom gelöst.

CORS zulassen: Access-Control-Allow-Origin

Bitten Sie die Person, die den Server unter http://172.16.1.157:8002/ verwaltet , Ihren Hostnamen zu Access-Control-Allow-Origin-Hosts hinzuzufügen. Der Server sollte einen Header ähnlich dem folgenden mit der Antwort zurückgeben:

Access-Control-Allow-Origin: yourhostname:port

Hallo, wenn ich es richtig verstanden habe, führen Sie eine XMLHttpRequest für eine andere Domain durch, auf der sich Ihre Seite befindet. Der Browser blockiert es also, da er aus Sicherheitsgründen normalerweise eine Anfrage desselben Ursprungs zulässt. Sie müssen etwas anderes tun, wenn Sie eine domänenübergreifende Anfrage stellen möchten. Ein Tutorial, wie dies erreicht werden kann, ist die Verwendung von CORS .

Wenn Sie Postboten verwenden, sind diese nicht durch diese Richtlinie eingeschränkt. Zitiert aus Cross-Origin XMLHttpRequest :

Normale Webseiten können das XMLHttpRequest-Objekt zum Senden und Empfangen von Daten von Remoteservern verwenden, sie sind jedoch durch dieselbe Ursprungsrichtlinie eingeschränkt. Erweiterungen sind nicht so begrenzt. Eine Nebenstelle kann mit Remoteservern außerhalb ihres Ursprungs kommunizieren, sofern sie zuerst originalübergreifende Berechtigungen anfordert.

Wenn Sie die Kontrolle über Ihren Server haben, können Sie PHP verwenden:

<?PHP
header('Access-Control-Allow-Origin: *');
?>

Wenn Sie dieses Problem mit Chrome haben, benötigen Sie keine Erweiterung.
Starten Sie Chrome über die Konsole:

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

Möglicherweise müssen Sie alle Registerkarten in Chrome schließen und neu starten.

Um die CORS Ermächtigung an den Header hinzufügen Apache verwenden, fügen Sie einfach die folgende Zeile innerhalb entweder die <Directory>, <Location>, <Files>oder <VirtualHost>Teile Ihrer Server - Konfiguration ( in der Regel in einer * Conf - Datei befindet, wie httpd.conf oder apache.conf) oder innerhalb eine .htaccessDatei:

Header gesetzt Access-Control-Allow-Origin "*"

Und dann Apache neu starten.

Das Ändern von Headern erfordert die Verwendung von mod_headers. Mod_headers ist in Apache standardmäßig aktiviert. Möglicherweise möchten Sie jedoch sicherstellen, dass es aktiviert ist.

Sie stellen eine Anfrage an eine externe Domäne 172.16.1.157:8002/von Ihrem lokalen Entwicklungsserver, weshalb eine Ausnahme zwischen verschiedenen Ursprüngen vorliegt. Entweder müssen Sie Header erlauben Access-Control-Allow-Origin:*sowohl Frontend und Backend oder alternativ verwenden diese Erweiterung cors Toggle - Header - Chrome - Erweiterung , wenn Sie Host - Backend und Frontend auf der gleichen Domain.

Ich hatte das gleiche Problem in meinen Vue.js- und SpringBoot-Projekten. Wenn jemand mit Feder arbeitet, können Sie diesen Code hinzufügen:

@Bean
public FilterRegistrationBean simpleCorsFilter() {  
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
    CorsConfiguration config = new CorsConfiguration();  
    config.setAllowCredentials(true); 
    // *** URL below needs to match the Vue client URL and port ***
    config.setAllowedOrigins(Collections.singletonList("http://localhost:8080")); 
    config.setAllowedMethods(Collections.singletonList("*"));  
    config.setAllowedHeaders(Collections.singletonList("*"));  
    source.registerCorsConfiguration("/**", config);  
    FilterRegistrationBean bean = new FilterRegistrationBean<>(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);  
    return bean;  
}   

Ich habe in diesem Artikel eine Lösung gefunden. Erstellen Sie eine einfache CRUD-App mit Spring Boot und Vue.js.

Führen Sie diesen Befehl in Ihrem Terminal aus und testen Sie ihn erneut.

curl -H "origin: originHost" -v "RequestedResource"

Z.B:

Wenn meine originHostgleich https://localhost:8081/und meine RequestedResourcegleich sindhttps://example.com/

Mein Befehl wäre wie folgt:

curl -H "origin: https://localhost:8081/" -v "https://example.com/"

Wenn Sie die folgende Zeile bemerken, sollte sie für Sie funktionieren.

<Zugriffskontrolle-Zulassungsursprung: *

Hoffe das hilft.

Sie können dies vorübergehend lösen, indem Sie das Firefox-Add-On CORS Everywhere verwenden . Öffnen Sie einfach Firefox, drücken Sie Strg + Umschalt + A, suchen Sie das Add-On und fügen Sie es hinzu!

Oder so:

npm install cors

cors = require("cors");
app.use(cors());

Sie werden es nicht glauben. Stellen Sie sicher, dass Sie "." am Ende der "URL"

Ich habe einen ähnlichen Fehler mit diesem Code erhalten:

fetch(https://itunes.apple.com/search?term=jack+johnson)
.then( response => {
    return response.json();
})
.then(data => {
    console.log(data.results);
}).catch(error => console.log('Request failed:', error))

Der Fehler, den ich bekam:

 Access to fetch at 'https://itunes.apple.com/search?term=jack+johnson'
 from origin 'http://127.0.0.1:5500' has been blocked by CORS policy:
 No 'Access-Control-Allow-Origin' header is present on the requested
 resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Nach vielen Recherchen wurde mir jedoch klar, dass das Problem darin bestand, dass ich nicht die richtige URL-Adresse aus der iTunes API-Dokumentation kopiert habe.

Es hätte sein sollen

https://itunes.apple.com/search?term=jack+johnson.

nicht

https://itunes.apple.com/search?term=jack+johnson

Beachten Sie den Punkt am Ende

Es gibt eine große Erklärung dafür, warum der Punkt wichtig ist und Probleme mit der DNS- und Zeichenkodierung zitiert, aber die Wahrheit ist, dass es Ihnen wahrscheinlich egal ist. Versuchen Sie, den Punkt hinzuzufügen, der möglicherweise auch für Sie funktioniert.

Als ich das "." alles funktionierte wie ein Zauber.

Ich hoffe es funktioniert auch bei dir.

Die genehmigte Antwort auf diese Frage ist ungültig.

Sie müssen Header für Ihren serverseitigen Code festlegen

app.use((req,res,next)=>{
    res.setHeader('Acces-Control-Allow-Origin','*');
    res.setHeader('Acces-Control-Allow-Methods','GET,POST,PUT,PATCH,DELETE');
    res.setHeader('Acces-Contorl-Allow-Methods','Content-Type','Authorization');
    next(); 
})

Sie müssen die Sicherheit für Ihren Browser anpassen oder die Berechtigung durch Anpassen der Sicherheit zulassen. (es ist für Ihre lokalen Tests unpraktisch) Um mehr darüber zu erfahren, gehen Sie bitte über den Link.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Installieren:

npm i cors

Fügen Sie dann cors () hinzu:

app.get("/list",cors(),(req,res) =>{

});

Geben Sie @CrossOrigin(origins = "http://localhost:8081") in der Controller-Klasse an.

Durch einfaches Hinzufügen des folgenden Textes in der Datei httpd.conf wird dieses Problem behoben .

Header gesetzt Access-Control-Allow-Origin "*"

$.get('https://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) { 
  // some code...
});

Setzen Sie einfach "https".