Muoversi: Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta

Question

Devo occuparmi di un server RESTful che non è sotto il mio controllo. Quando provo a prendere il record ID 1 da esso questo è l'errore che ottengo:

XMLHttpRequest cannot load http://www.example.com/api/v1/companies/1. 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:4200' is therefore not allowed 
access. 

posso curl sulla shell:

$ curl -I http://www.company.com/api/v1/companies/1 
HTTP/1.1 200 OK 
Cache-Control: private 
Content-Length: 11055 
Content-Type: application/javascript 
Last-Modified: Thu, 18 Jun 2015 07:30:26 GMT 
Accept-Ranges: bytes 
ETag: "5e772a598a9d01:0" 
P3P: policyref="/w3c/p3p.xml",CP="CAO DSP LAW CURa ADMa DEVa CUSi OUR LEG UNI" 
Date: Fri, 19 Jun 2015 13:06:46 GMT 
$ 

Io uso il seguente contentSecurityPolicy:

contentSecurityPolicy: { 
    'default-src': "'none'", 
    'script-src': "'self'", 
    'font-src': "'self'", 
    'connect-src': "'self' http://www.example.com", 
    'img-src': "'self'", 
    'style-src': "'self'", 
    'media-src': "'self'" 
} 

Come posso risolvere questo problema? Come posso dire a Ember di usarlo?

Answer 1

L'impostazione contentSecurityPolicy consente al browser di effettuare effettivamente la richiesta da http://localhost:4200 a http://www.example.com.

Se non si dispone di questo set, si sarebbe vedendo un errore del tipo:

[Report Only] rifiutato di connettersi a 'http://www.example.com/' perché viola il seguente contenuto direttiva politica di sicurezza: "Collegare -src 'self' http://localhost: * ws: // localhost: * ws: // localhost: 35729 ws: //0.0.0.0: 35729 ".

Dopo aver fatto la richiesta, se http://www.example.com non contiene una particolare intestazione che permette in realtà http://localhost:4200 di fare queste richieste, il browser genera un errore ..

Per ulteriori informazioni dare un'occhiata a questa domanda: How does Access-Control-Allow-Origin header work?

Se stai usando Ember CLI per lo sviluppo è possibile delega tutte le richieste Ajax per http://www.example.com/ utilizzando:

ember server --proxy http://www.example.com/ 

Ma questo non risolve il problema quando si passa alla produzione. Avrai bisogno di un'altra soluzione per questo.

Answer 2

Questo potrebbe essere un thread precedente, ma questa risposta può aiutare coloro che fanno riferimento a questo in futuro. Prova a utilizzare l'annotazione @CrossOrigin nel metodo restful a cui accedi. Esempio:

@CrossOrigin(origins = "http://localhost:4200")