Express-Server reagiert nicht richtig, wenn auf einem Remote-Server gehostet, wie ich React Redux lokal verwenden, um Daten von Express-App aus der Ferne zu bekommen

Question

Ich habe diese Funktionen, eine ist auf dem Server und die andere ist auf dem Client.

Knoten Express Code:

app.get('/api/current_user', (req, res) => { 
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 
     res.send(req.user); 
    }); 

Reagieren Redux Code:

export const fetchUser =() => async dispatch => { 
    const res = await axios.get(`${URI}/api/current_user`); 

    console.log("res data: " +res.data) 

    dispatch({ type: types.FETCH_USER, payload: res.data }); 
}; 

Das Problem ist, dass ich als Ausgabe von console.log("res data: " +res.data) wie diese {data: "", status: 200, statusText: "OK", headers: {…}, config: {…}, …} null erhalten. Aber ich bekomme JSON beim Testen im Browser als https://server243.azurewebsites.net/api/current_user.

Wenn ich bothe Server und clien lokal ausgeführt, erhalte ich Daten als Ausgabe von console.log("res data: " +res.data)

Answer 1

Wie es im Chat diskutiert wurde, das Problem liegt nicht in der react-Anwendung.

Das req.user-Objekt wird normalerweise von PassportJs erstellt. Also für PassportJs, um das zu tun, müssen Sie zuerst Ihre Reaktion Anwendung der Oauth-Provider (Google) in Ihrem Fall aufrufen. Dann leitet der Anbieter die Benutzer zu einem Bildschirm, wo sie ihren Benutzernamen und ihr Passwort verwenden können, um sich anzumelden.

Nach erfolgreicher Authentifizierung wird der registrierte Endpunkt in Ihrer Express-App vom Authentifizierungsanbieter aufgerufen, der schließlich eine gültige Sitzung zwischen dem Browser des Benutzers und Ihrem Express-Server herstellt.

Dann wird req.user die deserialized Daten des Passports enthalten.

Answer 2

Becouse von CORS Wenn Sie auf dem lokalen mashine tun Anfrage, alle (Server und Client) sind localhost und alles ist in Ordnung . Wenn Sie versuchen, Remote-Server zu dem acces - es yor Anforderung blockiert, becouse Server und Client ist nicht aus der gleichen Domäne

versuchen, diese Middleware auf Ihren ausdrücklichen Server hinzufügen

app.use((req, res, next) => { 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, PATCH, DELETE, MOVE, OPTIONS'); 
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); 
    next(); 
});