angolare 2 - 'Access-Control-Allow-Origin' Nessuna intestazione è presente sulla risorsa richiesta

Question

Quando si cerca di effettuare chiamate API dal mio angolare 2 App al mio API, ottengo il seguente errore:

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. 

Ho controllato ogni singola domanda sul web e qualsiasi cosa fosse relativa a CORS, nulla ha risolto il mio problema!

mio laravel API in esecuzione sulla porta 80. (localhost)

mio angolare 2 app in esecuzione sulla porta 3000. (localhost: 3000)

• Ho cercato per consentire cors in lato Laravel con middleware Cors
• Le chiamate API sono in funzione utilizzando la sicurezza Web di Chrome disattivata. La prima risposta here risolve il problema, ma voglio davvero smettere di usare la versione di Chrome CMD e non protetta ogni volta che sto testando la mia app.
• Utilizzo dell'estensione chrome Le chiamate API POSTMAN alla mia API funzionano.

Quindi .. Cosa c'è che non va? Perché la mia app Angular 2 non riesce a ottenere record dalla mia API?

Answer 1

Ok. sembra che abbia bisogno di configurare apache per questo.

sto usando il server web xampp e ho dovuto modificare il mio httpd.conf come spiegato here per risolvere questo problema.

Aggiunto questa linea:

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

risolto il mio problema.

Il riavvio di apache è necessario.

Answer 2

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

Sono stati registrati percorsi per gestire le richieste OPTIONS?

Se si aggiunge semplicemente il middleware ai percorsi esistenti GET e POST e il browser sta effettuando una richiesta OPTIONS, il middleware non viene mai raggiunto.

Answer 3

Aprire lo strumento di controllo cromato, passare alla scheda Network e ispezionare la richiesta Angular2 inviata.

In Headers ->Response Headers, verificare se v'è Access-Control-Allow-Origin:* (io non scommetto)

Se si sta costruendo un'API, la soluzione più semplice è quello di aggiungere

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"); 
} 

all'inizio del routes.php, usare un middleware sarebbe un approccio migliore, ma assicurati che funzioni correttamente e aggiungendo Access-Control-Allow-Origin all'intestazione della risposta.

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(); 
});