Bonjour, j'utilise React Router v4.
My React fonctionne sur le port 3000, tandis que le serveur express s'exécute sur le port 8080. Le segment Redirection du code ci-dessous m'amène à localhost: 3000 / http: // localhost: 8080 / auth / login .
J'ai déjà "proxy": "localhost: 8080" dans le package.json de mon React. Cela ne fonctionne pas.
Comment puis-je rediriger de localhost: 3000 vers localhost: 8080 / auth / login ?
App.js
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^3.6.2",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.3",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"proxy": "http://localhost:8080",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Package.json du client
class App extends Component {
constructor(props) {
super(props);
this.props.fetchProducts();
this.props.fetchUser();
}
render() {
return (
<Switch>
<Route exact path='/cart' render={() => this.props.isLoggedIn ?
<Checkout /> :
<Redirect to='http://localhost:8080/auth/login' />
} />
<Route exact path='/user/account/profile' render={() => <Profile />} />
<Route exact path='/' render={() => <MainPage />} />
</Switch>
);
}
}
4 Réponses :
Essayez d'ajouter cette ligne à votre package.json dans le dossier client (où se trouvent les fichiers de réaction).
"proxy": {
"/api/*": {
"target": "http://localhost:8080"
}
},
Cela redirigera vos requêtes vers le serveur express. Modifiez également la redirection vers la redirection vers / auth / login , vous n'avez pas besoin de spécifier l'URL complète.
J'ai déjà "" proxy ":" localhost: 8080 "` dans le package.json de mon React. Ça ne marche pas.
Vous pouvez simplement ajouter un proxy dans votre fichier package.json de reactjs.
axios.post('/api/auth', {credentials}).then(res => res.data.user)
Cela se connectera au serveur nodejs qui est démarré sur le port 8080.
Vous devriez appelez l'API du côté client en utilisant l'url
"proxy": "http://localhost:8080"
et en même temps, vous avez configuré des routes dans nodejs en utilisant des routes si vous utilisez express
Cela devrait fonctionner.
J'ai déjà "" proxy ":" localhost: 8080 "` dans le package.json de mon React. Ça ne marche pas.
Comme je ne pouvais pas utiliser la redirection de react-router pour créer un lien vers / auth / login , j'ai changé window.location.href dans une méthode et renvoyé null.
pré> XXX
Je pense que si votre serveur express s'exécute sur le port 8080 que le routeur de réaction ne vous redirige pas vers " http: / / localhost: 8080 / auth / login "car c'est une API qui authentifiera vos identifiants de nom d'utilisateur / mot de passe.
vous pouvez utiliser fetch / axios pour appeler votre API de connexion.
Je pense que vous vérifiez si l'utilisateur est déjà connecté avant de le rediriger vers la connexion, mais je ne pense pas que vous deviez rediriger vers la page de connexion si l'utilisateur est déjà connecté.
Comme vous le savez déjà à partir de this.props.isLoggedIn, si l'utilisateur est authentifié ou non, cela ne devrait-il pas être this.props.isLoggedIn?
Oui, mon html de connexion est servi par 'localhost: 8080 / auth / login'. Pour ajouter, j'ai déjà
"proxy": "localhost: 8080"dans le package.json de mon React. Ça ne marche pas.