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

77

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.
Parkar
quelle
1
Das Problem liegt darin, dass die Richtlinie für denselben Ursprung verhindert, dass die Antwort empfangen wird, da die Ursprungs- / Empfangsdomänen aufgrund der Portnummern unterschiedlich sind. Um dies zu beheben, müssen Sie CORS-Header in der Antwort von zurückgeben http://172.16.1.157:8002/firstcolumn/.... Wie Sie das tun, hängt davon ab, welche serverseitige Infrastruktur Sie verwenden.
Rory McCrossan
In diesem Fall führt Origin A eine GET-Anforderung an Origin B aus. Die Antwort wird an einen anderen Ort in Origin B umgeleitet. Die Lösung besteht darin, Chrome zu täuschen, dass Origin B Origin A ist. Was ist, wenn Origin B zu Origin C umgeleitet wird? Können wir auf Origin C verweisen oder müssen wir Origin C so austricksen, dass es als Origin A erscheint? Ich denke, wir können zu jedem Origin C umleiten (zum Beispiel zu einer Single-Signon-Seite eines Drittanbieters oder zu www.stackoverflow.com), unabhängig von Origin A oder dem Access-Control-Allow-OriginHeader von Origin C )
The Red Pea

Antworten:

55

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.

altShiftDev
quelle
2
Ich bin mir nicht sicher, wie ich es einrichten soll. Kannst du es weiter erklären? Screenshots wären schön.
Schwarz
@altShiftDev Verfügt dieses Plugin über folgende Optionen: "Die Antwort auf eine Preflight-Anfrage besteht die Zugriffskontrollprüfung nicht: Die Umleitung ist für eine Preflight-Anfrage nicht zulässig."?
tw1742
17

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

CORS zulassen: Access-Control-Allow-Origin

Parkar
quelle
7
Die Verbindung ist jetzt unterbrochen :(
kabrice
1
defekter Link, überhaupt keine Beschreibung.
Cyber
Aktualisiere den Link mein Freund!
Peter VARGA
Sie benötigen keine Erweiterung für Chrome benötigen: stackoverflow.com/a/60950835/2280067
SJX
12

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
awd
quelle
@RoryMcCrossan sagt, dass der Ursprung localhost ist, also werden cors ausgelöst. Meiner Ansicht nach?
user5014677
6

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.

Bhavan Patel
quelle
6

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

<?PHP
header('Access-Control-Allow-Origin: *');
?>
Kardi Teknomo
quelle
Besser zur .htaccess-Datei hinzufügen, dies gilt für das gesamte Projekt und nicht nur für die Sites, denen Sie dieses Snippet hinzugefügt haben.
Cyber
6

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.

SJX
quelle
5

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.

Pankaj Shinde
quelle
hinzugefügt in mein .htaccesslokales Projekt und funktioniert wie Charme, vergessen Sie nicht, Ihren Server / Mamp / Apache neu zu starten, was auch immer Sie verwenden.
Cyber
4

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.

Manav Mandal
quelle
Hey, der mitgelieferte Chrome-Erweiterungslink ist defekt. Können Sie bitte die Antwort aktualisieren?
OM Bharatiya
3

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.

mma
quelle
3

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.

Ronnjoe
quelle
2

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!

Prabhash Rathnayake
quelle
1
Vielen Dank, dies hilft, den ganzen Ärger zu vermeiden und den Code von localhost zu testen.
Ewalel
2

Oder so:

npm install cors

cors = require("cors");
app.use(cors());
Amin Zel
quelle
1

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.

William Ortega
quelle
1

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(); 
})
Berke Kaan Cetinkaya
quelle
0

Installieren:

npm i cors

Fügen Sie dann cors () hinzu:

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

});

Olu Teax
quelle
0

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

Ajay Takur
quelle
-1

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

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

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

Setzen Sie einfach "https".

Ameen Farook
quelle