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.
javascript
jquery
vuejs2
Parkar
quelle
quelle
http://172.16.1.157:8002/firstcolumn/...
. Wie Sie das tun, hängt davon ab, welche serverseitige Infrastruktur Sie verwenden.Access-Control-Allow-Origin
Header von Origin C )Antworten:
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 von172.16.1.157:8002 or any other domain
.quelle
Vielen Dank an alle, ich habe durch diese Erweiterung auf Chrom gelöst.
CORS zulassen: Access-Control-Allow-Origin
quelle
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:
quelle
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.
quelle
Wenn Sie die Kontrolle über Ihren Server haben, können Sie PHP verwenden:
<?PHP header('Access-Control-Allow-Origin: *'); ?>
quelle
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.
quelle
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.htaccess
Datei: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.
quelle
.htaccess
lokales Projekt und funktioniert wie Charme, vergessen Sie nicht, Ihren Server / Mamp / Apache neu zu starten, was auch immer Sie verwenden.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 erlaubenAccess-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.quelle
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.
quelle
Führen Sie diesen Befehl in Ihrem Terminal aus und testen Sie ihn erneut.
Z.B:
Wenn meine
originHost
gleichhttps://localhost:8081/
und meineRequestedResource
gleich sindhttps://example.com/
Mein Befehl wäre wie folgt:
Wenn Sie die folgende Zeile bemerken, sollte sie für Sie funktionieren.
<Zugriffskontrolle-Zulassungsursprung: *
Hoffe das hilft.
quelle
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!
quelle
Oder so:
npm install cors cors = require("cors"); app.use(cors());
quelle
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
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.
quelle
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(); })
quelle
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
quelle
Installieren:
Fügen Sie dann cors () hinzu:
app.get("/list",cors(),(req,res) =>{ });
quelle
Geben Sie
@CrossOrigin(origins = "http://localhost:8081")
in der Controller-Klasse an.quelle
Durch einfaches Hinzufügen des folgenden Textes in der Datei httpd.conf wird dieses Problem behoben .
quelle
$.get('https://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) { // some code... });
Setzen Sie einfach "https".
quelle