web-dev-qa-db-fra.com

ReactJS APP dans Heroku "En-tête d'hôte non valide" Configuration d'hôte?

J'essaie de mettre mon React app sur le Heroku. L'ensemble du projet comprend une API (express) et un client (ReactJS). J'ai mis mon API sur heroku. Mais quand j'ai mis mon client sur Heroku, cela montre que la construction a réussi. Mais quand je open il, il montre Invalid Host header.

Je google ce problème et beaucoup de gens me disent de configurer Host . Mais ils utilisent webpack. Je construis cela avec create-react-app et je l'exécute par npm start. Je veux savoir comment résoudre ce problème de la manière la plus simple. Merci.

javascriptreactjsherokuwebpackredux
11
fourth

Si, pour une raison quelconque, vous tentiez de déployer le client sans le serveur, assurez-vous de supprimer:

"proxy": "http://localhost:5000"

du package.json du client ..

Modifier juillet 2019:

Créer React App 2.0 a changé la façon dont nous définissons les proxys. Pour déterminer la version que vous utilisez, vérifiez votre package côté client.json: "react-scripts" supérieur à "2.x.x"

Maintenant, dans le répertoire client/installez ce paquet:

npm install http-proxy-middleware --save

Créez le fichier setupProxy.js dans le répertoire client/src /. Il n'est pas nécessaire d'importer ce fichier n'importe où, l'ARC recherche un fichier de ce nom et le charge.

Il existe différentes façons d'ajouter des proxys:

Option 1: 

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    proxy(["/api", , "/otherApi"], { target: "http://localhost:5000" })
  );
};

Option 2 

  const proxy = require('http-proxy-middleware');

    module.exports = function(app) {
        app.use(proxy('/api/**', { target: 'http://localhost:5000' }));
        app.use(proxy('/otherApi/**', { target: 'http://localhost:5000' }));
    };

Répondre aux commentaires

Ce proxy est juste utilisé dans un environnement de développement. En production/Heroku, tout fonctionne sous le même serveur, il n'y a donc pas besoin de proxy.

Le serveur create-react-app ne fonctionne que dans l'environnement Dev, donc lorsque l'application est exécutée en mode PROD, elle est juste utilisée pour générer le bundle JS de production qui sera servi par le serveur Node/Express.

Veuillez vérifier cette autre réponse où j'explique ce qui est nécessaire pour le faire fonctionner en production.

8
Roberto Rodriguez

Invalid Host Header a été ajouté comme solution à DNS Rebinding .

Pour résoudre ce problème, vous devez créer un fichier nommé . Env.development dans le dossier racine. Dans ce fichier, définissez

Host=name.herokuapp.com

De la documentation: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#invalid-Host-header-errors-after- configuration-proxy

4
Agney