Come abilitare CORS in un'applicazione EmberJS?

Question

Possiedo un'applicazione EmberJS che utilizza i dati ember per accedere ai dati tramite un'API REST. L'API REST è in esecuzione sulla stessa macchina ma su una porta diversa (anche se probabilmente si applica alle API REST fornite da un altro dominio.

Quando arrivo all'URL localhost:4200/items Ottengo il seguente errore nella console di Firefox:

contenuti la politica di sicurezza: le impostazioni della pagina bloccato il caricamento di una risorsa a http://localhost:7654/api/items ("connect-src http://localhost:4200 WS: // localhost: 35729 WS: //0.0.0.0: 35729 http://0.0.0.0:4200")

.

Ho provato a installare ember-cli-cors ma nulla è cambiato. Ho anche provato la soluzione a http://discuss.emberjs.com/t/ember-data-and-cors/3690, ma non ha funzionato. Quella discussione è stata del 2013, quindi non è una grande sorpresa.

L'API REST è scritta in python utilizzando Flask e Flask-cors. Usando la scheda di rete, posso vedere che la richiesta è stata inviata e i dati che sono stati rinviati, ma l'errore è ancora lì. L'intestazione Access-Control-Allow-Origin è impostata su http://localhost:4200 nella risposta, come previsto.

app/router.js

import Ember from 'ember'; 
import config from './config/environment'; 

var Router = Ember.Router.extend({ 
    location: config.locationType 
}); 

export default Router.map(function() { 
    this.route('items'); 
}); 

app/adattatori/application.js

import DS from 'ember-data'; 

export default DS.RESTAdapter.extend({ 
    namespace: 'api', 
    host: 'http://localhost:7654', 
}); 

app/percorsi/items.js

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
    return this.store.find('item'); 
    } 
}); 

app/modelli/item.js

import DS from 'ember-data'; 

export default DS.Model.extend({ 
    name: DS.attr(), 
}); 

app/templates/items.hbs

{{#each item in items}} 
    {{ item.name }}<br> 
{{else}} 
    <p>No items</p> 
{{/each}} 

{{outlet}} 

Answer 1

Questo è un problema CSP non CORS

All'interno config/environment.js trovare ENV.contentSecurityPolicy e aggiungere http://localhost:7654 alla chiave 'connect-src'

e .es.

ENV.contentSecurityPolicy = { 
    // ... other stuff here 
    'connect-src': "'self' http://localhost:7654" 
} 

Probabilmente avrete anche bisogno di un'impostazione diversa per il vostro ambiente di produzione.