React Dev-Umgebung eine neue Sitzung erstellen

Question

Ich habe eine einfache NodeJS & React WebApp, die funktioniert, wenn ich die React Build in NodeJS bereitstellen.

Wenn ich auf Login klicke, wird der Server die Berechtigung prüfen und auf eine andere Seite umleiten. Wenn ich versuche, die Webapp von der React Build (Port 3000) zu starten, merke ich, dass ich nach dem Einloggen eine neue Session habe und das Abrufen der Daten vom Server (Port 8080) nicht funktioniert.

https://github.com/Yanipo5/MenuCreator

NodeJS - Anmeldung Api (Routing zu url funktioniert);

router.post('/',approveUserPassword, function(req, res){ 

    console.log(new Date() + ":" + req.sessionID) 

    if(req.session.auth){ 
    let url = 'http://localhost:3000/edit-menu'; 
    res.redirect(url); 

    } 
    }); 
function approveUserPassword(req, res, next) { 

    let email = req.body.email; 
    let psw = req.body.psw; 
    let query = "SELECT id FROM Users "    + 
       "WHERE email= '" + email + "' AND " + 
       "password='" + psw + "'"   ; 

    con.query(query, function (err, result, fields) { 
    if (err) throw err; 

    if(result.length > 0){ 
     req.session.auth = true; 
     req.session.rest_id = result[0].id; 

    }else{ 
     req.session.auth = false; 
    } 

    next(); 
    }); 
} 

---

Reagieren - wird auf Port 3000, fehlschlagen, da die neue Sitzung nicht authentifiziert werden.

componentDidMount(){ 
    let url ='http://localhost:8080/api/menu'; 
    fetch(url, {credentials: 'same-origin' }) 
      .then(response => response.json()) 
      .then(json => { 
      this.setState({data: json}); 
      console.log(json) 
      }) 
    } 

---

api/Menü

function checkAuth(req, res, next) { 
    console.log(new Date() + ":" + req.sessionID) 

    if(!req.session.auth){ 
    res.json("no auth for menu"); 

    }else{ 
     next() 

    } 
}; 


router.get('/', checkAuth, function(req, res){ 

    let sql = "SELECT * FROM Menu_Items " + 
       "WHERE rest_id=" + req.session.rest_id + ";"; 

    con.query(sql, function (err, result, fields) { 
     if (err){ 
     console.log(sql); 
     throw err; 
     } 

     res.json(result); 
    }); 

}); 

Hier ist die NodeJS für die Sitzungen anmelden (wie Sie sehen, gibt es zwei eindeutige):
Mo 13. November 2017 19.21 Uhr : 59 GMT + 0200 (IST): 6tu0wi3Lt2RNEMD-SZHCzX2vJ0DljtHL
Mo 13. November 2017 19.22.00 GMT + 0200 (IST): JRBGJjxS109F3C_ghr3ggkQlcC5bapsE

Answer 1

Ihr lokaler Entwicklungsserver und Ihre API werden auf verschiedenen Ports ausgeführt. Aufgrund der Same Origin Policy verweigert der Browser alle Anfragen, die nicht auf der gleichen Domain oder Port sind.

Ich habe das Repo überprüft und es verwendet create-react-app, was bedeutet, dass Sie in der Lage sein sollten, einen Proxy einzurichten. Ich habe das schon oft selbst gemacht.

In client-src/package.json die folgende Zeile:

"proxy": "http://localhost:8080/" 

Dies wird Proxy-Anfragen an die API. Sie können nun Anrufe an Ihre API machen etwa so:

componentDidMount(){ 
    let url ='http://localhost:3000/api/menu'; 
    fetch(url, {credentials: 'same-origin' }) 
     .then(response => response.json()) 
     .then(json => { 
     this.setState({data: json}); 
     console.log(json) 
     }) 
}