2015-09-20 7 views
7

Sto cercando di fare un post al mio API da un client Angularjs, ho questa configurazione sul server che è in esecuzione in un altro dominio:CORS - http OPZIONI errore angolare ed Express

app.use(function(req, res, next) { 
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS, DETELE'); 
    res.setHeader('Access-Control-Allow-Headers', '*'); 
    next(); 
}); 

Il headers inviati al server sono:

OPTIONS /api/authenticate HTTP/1.1 
Host: xxxx.herokuapp.com 
Connection: keep-alive 
Access-Control-Request-Method: POST 
Origin: http://127.0.0.1:5757 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36 
Access-Control-Request-Headers: accept, content-type 
Accept: */* 
Referer: http://127.0.0.1:5757/login 
Accept-Encoding: gzip, deflate, sdch 
Accept-Language: en,es;q=0.8,gl;q=0.6,pt;q=0.4 

le intestazioni di risposta sono:

HTTP/1.1 403 Forbidden 
Server: Cowboy 
Connection: keep-alive 
X-Powered-By: Express 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS, DETELE 
Access-Control-Allow-Headers: X-Requested-With,content-type,Authorization 
Content-Type: application/json; charset=utf-8 
Content-Length: 47 
Etag: W/"2f-5f255986" 
Date: Sun, 20 Sep 2015 19:26:56 GMT 
Via: 1.1 vegur 

E quello che ottengono nel Chrome c onsole è:

angular.js:9814 OPTIONS http://xxxxx.herokuapp.com/api/authenticate 
XMLHttpRequest cannot load http://xxxx.herokuapp.com/api/authenticate. Response for preflight has invalid HTTP status code 403 
+0

Hai provato a mettere la configurazione del cors molto prima (bodyParsing, router, metodoOverride, ecc.)? date un'occhiata qui: http://stackoverflow.com/questions/11001817/allow-cors-rest-request-to-a-express-node-js-application-on-heroku Spero che aiuti –

risposta

10

In realtà la maggior parte dei browser per principi di sicurezza non consente il codice lato client js per richiedere risorse di stesso host.

Tuttavia, è consentito quando il proprietario della risorsa comunica al browser del client che la sua risorsa di condivisione aggiunge le intestazioni di Condivisione di risorse di origine incrociata in risposta.

Per non indovinare con le intestazioni utilizzare il pacchetto cors - farà tutto il lavoro sporco per te.

npm install cors --save 

e poi:

var express = require('express') 
    , cors = require('cors') 
    , app = express(); 

app.use(cors()); 

che è tutto :)

documenti aggiuntivi qui: https://www.npmjs.com/package/cors

+0

Puoi spiegarmi cosa stavo sbagliando e perché funziona? Il modulo corsivo –

+3

fa lo stesso come te, ma non hai definito la maggior parte delle regole. Puoi leggerlo qui: https://github.com/expressjs/cors/blob/master/lib/index.js – num8er

+1

o per verificare: apri chrome e analizza l'intestazione che il modulo cors invia e scrive gli stessi header al tuo codice e rimuovi modulo cors. – num8er

0

che vedo, che questo argomento è un po 'più vecchio, ma ho trovato un piccolo refuso nel tuo ACCESS-CONTROL-ALLOW-METHODS.

Volevo solo condividere questo per gli altri utenti con un problema simile quando copiano & pasta:

Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS, DETELE 

V'è un errore di battitura nel DELETE.