2017-12-16 1 views
1

Ich habe eine CORS-Problem (ich denke), wenn ich eine Login-Post-Anfrage von Briefträger senden, ist es erfolgreich. Wenn ich versuche, mich mit meiner angular 2 Frontend App anzumelden, scheint der Anforderungsstatus 200 zu sein, aber nichts passiert, und in der Konsole bekomme ich diese merkwürdige Nachricht, dass mein localhost: 4200 nicht erlaubt ist. Wie kann ich das beheben?CORS mit Angular und Express - Arbeiten in Postman, aber nicht im Browser

Angular HTTP-Methode

authenticateUser(user){ 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    return this.http.post('http://localhost:3000/api/authenticate', user, {headers: headers}) 
    .map(res => res.json()); 
    } 

Fehlernachricht von der Konsole. enter image description here

Postman Anfrage (Erfolg) enter image description here

Im Fall wäre es ein ausdrücklicher Zusammenhang sein Problem hier ist mein ausdrücklicher Code:

const express = require("express") 
const bodyParser = require("body-parser") 
const logger = require('morgan') 
const api = require("./api/api") 
const path = require('path') 
const secret = require('./models/secrets') 
const expressJWT = require('express-jwt') 
const cors = require('cors'); 

const app = express() 

app.set("json spaces", 2) 
app.use(logger("dev")) 
app.use(bodyParser.json()) 
app.use(bodyParser.urlencoded({ extended: false })) 

app.use(expressJWT({secret: secret}).unless({path : ['/api/authenticate', '/api/register']})) 

app.use("/api/", api) 

app.use(function (req, res, next) { 
    var err = new Error('Not Found') 
    err.status = 404 
    next(err) 
}) 

app.use(function (err, req, res, next) { 
    console.error(err.status) 
    res.status(err.status || 500) 
    res.json({ msg: err.message, status: err.status }) 
}) 

// Body Parser middleware 
app.use(bodyParser.json()); 

// CORS middleware 
app.use(cors()); 

// set static folder 
app.use(express.static(path.join(__dirname, 'public'))); 
//Call this to initialize mongoose 
function initMongoose(dbConnection) { 
    require("./db/mongooseConnect")(dbConnection) 
} 

app.initMongoose = initMongoose 

module.exports = app 

Und die Route für/authenticate sieht so aus

// Authenticate 
router.post('/authenticate', (req, res, next) => { 
    const username = req.body.username; 
    const password = req.body.password; 

    User.getUserByUsername(username, (err, user) => { 
     if (err) throw err; 
     if (!user) { 
      return res.json({ success: false, msg: 'User not found' }); 
     } 

     User.comparePassword(password, user.password, (err, isMatch) => { 
      if (err) throw err; 
      if (isMatch) { 
       const token = jwt.sign({data: user}, secret, { 
        expiresIn: 604800 // 1 week 
       }); 

       res.json({ 
        success: true, 
        token: 'Bearer ' + token, 
        user: { 
         id: user._id, 
         name: user.name, 
         username: user.username, 
         email: user.email 
        } 
       }); 
      } else { 
       return res.json({ success: false, msg: 'Wrong password' }); 
      } 
     }); 
    }); 
}); 

Antwort

2

Die Anforderung, die ausgeführt wird, wird als preflight request bezeichnet. Sie können dies in der Fehlermeldung sehen, die besagt, dass die Antwort auf die Preflight-Anforderung die Zugriffskontrollprüfung nicht besteht. Preflight-Anfragen werden vom Browser gemacht, da CORS nur eine Browser-Sicherheitsbeschränkung ist - Deshalb funktioniert es in Postman, das ist natürlich nicht ein Browser.

Die docs für die CORS-Middleware Sie Zustand der folgenden verwenden:

Preflighten zu aktivieren, müssen Sie einen neuen OPTIONS-Handler für die Route hinzufügen möchten Sie unterstützen:

in Ihrem Fall, wie Sie CORS Infront für alle Ursprungsländer zu arbeiten, usw. festgelegt haben, können Sie die folgende (wieder aus der Dokumentation) verwenden:

app.options('*', cors()) // include before other routes 

Wie der Kommentar sagt, müssen Sie diese Datei an den Anfang Ihrer .js-Datei verschieben, damit sie zuerst verarbeitet wird.

Es ist auch ratsam, die erlaubten Ursprünge, Routen usw. festzulegen, um festzulegen, welche Ursprünge auf welche Endpunkte zugreifen können. Sie können mehr darüber mit Ihrer bevorzugten Suchmaschine lesen.

+0

Danke! Ich habe nicht darüber nachgedacht, aber die Reihenfolge war das Problem. Ich habe die App verschoben.benutze (cors()); bis vor der expressJWT Middleware und vor der App.use ("/ api /", api). Das hat das Problem schließlich gelöst. Ich musste '*' jedoch nicht hinzufügen. –

+0

Ok, cool. Danke für die zusätzlichen Informationen. Die Dokumente sind dann ein wenig irreführend, aber wenn Sie direkt dorthin gehen, wo es die [einfache Verwendung] erklärt (https://github.com/expressjs/cors#simple-usage-enable-all-cors-requests), dann ist es schlägt vor, nur 'app.use (cors())' sollte mit allen Anfragen umgehen, wie Sie gesagt haben. –

0

Bei Verwendung von CORS als Sicherheitsmaßnahme ist es erforderlich, dem Server explizit mitzuteilen, welche Adresse Dateien auf diese Weise senden darf. Sie müssen dies Ihrem Header hinzuzufügen:

Access-Control-Allow-Origin: http://addressThatIsSendingSomething.com 

mehr Siehe here und here.

+0

Sie meinen in der Kopfzeile auf der Post Anfrage von meiner eckigen App? Warum funktioniert es mit Postboten? Ich habe keine Ursprungsüberschriften dort angegeben? –

Verwandte Themen