Angular 2 - No 'Access-Control-Allow-Origin-Header auf die angeforderte Ressource

Question

vorhanden ist Beim Versuch API-Aufrufe von meinem Angular 2 App auf meine API zu machen, bekomme ich folgende Fehlermeldung:

XMLHttpRequest cannot load http://localhost/myAPI/public/api/v1/auth/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 422. 

Ich habe jede einzelne Frage im Web und alles, was mit CORS zusammenhängt, überprüft, nichts hat mein Problem gelöst!

Meine Laravel API läuft auf Port 80 (localhost)

Meine Winkel 2 App läuft auf Port 3000. (localhost: 3000)

• Ich habe versucht, zu ermöglichen, cors in Laravel Seite mit Cors Middleware
• Die API-Aufrufe sind arbeiten mit Chrome Web Security off. Die erste Antwort here löst das Problem, aber ich möchte wirklich aufhören, die CMD und ungesicherte Chrome-Version jedes Mal im Test meiner App zu verwenden.
• Mit Chrome-Erweiterung POSTMAN API-Aufrufe an meine API funktionieren.

Also .. Was ist los? Warum kann meine Angular 2-App keine Datensätze von meiner API abrufen?

Answer 1

Ok. scheint wie Notwendigkeit, Apache dafür zu konfigurieren.

ich benutze xampp webserver, und ich musste meine httpd.conf wie erklärt here bearbeiten, um dies zu lösen.

Added diese Zeile:

Header set Access-Control-Allow-Origin "http://localhost:3000" 

mein Problem gelöst.

Neustart des Apache ist erforderlich.

Answer 2

I've been trying to enable cors in Laravel side with Cors middleware

Haben Sie Routen registriert, um mit OPTIONS Anfragen umzugehen?

Wenn Sie einfach Middleware zu bestehenden GET und POST Routen hinzufügen, und der Browser eine OPTIONS Anfrage macht, wird die Middleware nie erreicht.

Answer 3

Öffnen Sie das Chrom-Inspektionswerkzeug, wechseln Sie zu Network und überprüfen Sie die Anforderung Angular2 gesendet.

In Headers ->Response Headers, überprüfen, ob es Access-Control-Allow-Origin:* ist (ich wette nicht)

Wenn Sie eine API bauen, ist die einfachste Abhilfe

if (Request::is("api/*")) { 
    header("Access-Control-Allow-Origin: *"); 
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization, If-Modified-Since, Cache-Control, Pragma"); 
} 

am Anfang routes.php hinzuzufügen ist, eine Middleware zu verwenden, wäre ein besserer Ansatz, aber stellen Sie sicher, dass es ordnungsgemäß funktioniert, und fügen Sie dem Antwort-Header Access-Control-Allow-Origin hinzu.

Answer 4

//Add this middleware in your express app 
app.use(function (req, res, next) { 
res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); 
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); 
res.header('access-Control-Allow-Origin', '*'); 
next(); 
});