AngularJS: inviare dati a REST API esterno

Question

ho una base di installazione del servizio AngularJS in questo modo:

app.factory('User', function($resource) { 
return $resource('http://api.mysite.com/user/:action:id/:attr', {}, { 
    history: { 
     method: 'GET', 
     params: { 
      attr: 'history' 
     } 
    }, 
    update: { 
     method: 'POST', 
     params: { 
      name: 'test' 
     } 
    } 
}); 
}); 

e lo uso come questo:

User.history({id: 'testID'}, function(data) { 
    console.log('got history'); 
    console.log(data); 
}); 
User.update({id: 'me'}, function(data) { 
    console.log('updated'); 
    console.log(data); 
}); 

Problema uno: User.update(), nonostante abbia il metodo impostato su POST, continua a inviare OPZIONI come metodo di richiesta.

Sebbene gli strumenti di Chrome Dev riportino l'intestazione della richiesta Access-Control-Request-Method: anche POST viene inviato (non è sicuro se ciò significa qualcosa).

Problema due: Continuo a ricevere un errore con CORS, pur avendo queste intestazioni fissati nel codice API:

header('Access-Control-Allow-Origin: *'); 
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS"); 

Questo problema mostra solo se se fare una richiesta non-GET.

Qual è il modo corretto di gestirlo? Ho anche esaminato JSONP, ma essendo questa una API RESTful, non sono sicuro di come aggirare i problemi con il solo supporto GET.

Answer 1

I tuoi due problemi sono in realtà un problema. La richiesta OPTIONS fa parte del processo CORS. Per le richieste POST, il browser invia prima una chiamata OPTIONS e il server risponde se è possibile eseguirlo.

Se la richiesta OPZIONI non riesce, Angular/Chrome mostra il motivo nella console. Per esempio:

OPTIONS https://*** Request header field Content-Type is not allowed by Access-Control-Allow-Headers. angular.min.js:106 

XMLHttpRequest cannot load https://***. Request header field Content-Type is not allowed by Access-Control-Allow-Headers. 

probabilmente È necessario impostare Access-Control-Lasciare intestazioni sul server, troppo:

header('Access-Control-Allow-Headers: Content-Type, x-xsrf-token') 

x-xrsf-token è per angolare' per prevenire CSRF. Potrebbe essere necessario aggiungere più intestazioni, a seconda di ciò che si invia dal client.

Ecco una guida molto buona sul CORS: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

Answer 2

In AngularJS per rendere CORS di lavoro si hanno anche per sovrascrivere le impostazioni predefinite del angolare httpProvider:

var myApp = angular.module('myApp', [ 
    'myAppApiService']); 

myApp.config(['$httpProvider', function($httpProvider) { 
     $httpProvider.defaults.useXDomain = true; 
     delete $httpProvider.defaults.headers.common['X-Requested-With']; 
    } 
]); 

Basta impostare useXDomain a true non è abbastanza. Le richieste AJAX sono anche inviate con l'intestazione X-Requested-With, che le indica come AJAX. La rimozione dell'intestazione è necessaria, quindi il server non rifiuta la richiesta in entrata .

Nota: Rispondere funziona solo per AngularJS anziani versione precedente alla 1.2. Con 1.2 e sopra non devi fare nulla per abilitare CORS.

Answer 3

Meglio risolvere questo problema sul server. Su apache puoi risolverlo in questo modo in un file .htaccess. Questa è una fonte di dolore per lo sviluppo angolare e può essere risolta in modo angolare ma probabilmente non è il modo migliore per farlo.

Header set Access-Control-Allow-Origin "*" 
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" 
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"