web-dev-qa-db-fra.com

Le proxy dans package.json n'affecte pas la demande d'extraction

J'essaie d'extraire des données du serveur de développement à l'aide de React.

J'exécute le client sur localhost:3001 et le backend sur port 3000.

La requête de récupération: 

 const laina = fetch('/api/users');
    laina.then((err,res) => {
      console.log(res);
    })

Lorsque j'exécute mon serveur de développement et mon serveur webpack-dev, le résultat suivant est généré:

GET http://localhost:3001/api/users 404 (Not Found)

J'ai essayé de spécifier le proxy dans le package.json afin que la requête soit envoyée au serveur d'API, mais rien n'a changé.

Voici mon fichier package.json: 

 enter image description here

.. et le webpack.config:  enter image description here

S'il vous plaît dites-moi, si vous avez besoin de voir autre chose de mon projet. Je m'excuse, si je manque quelque chose et que je ne suis pas rigoureux, je suis encore assez nouveau pour utiliser ces technologies. 

node.jsapireactjsproxyrequest
6
Radoslav Naidenov

Vous pouvez modifier l’URL de l’API de votre requête de récupération pour donner le nom d’hôte complet depuis. 

 fetch('http://localhost:3000/api/users')

assurez-vous également que vous avez activé CORS sur votre backend

Si vous voulez rediriger ce webpack, vous pouvez essayer devServer.proxy en tant que

devServer: { 
    inline: true, 
    contentBase: './dist', 
    port: 3001, 
    proxy: { "/api/**": { target: 'http://localhost:3000', secure: false }  }
 }
9
Shubham Khatri

Dans le package.json

"proxy": {
    "/api/users": {
        "target": "http://localhost:3000"
    }
},
2
Jose Pinheiro

Je sais que je suis un peu en retard pour le jeu ici, mais je vais le laisser ici pour référence future.

Pour que le proxy devServer fonctionne comme prévu, vous devez spécifier que l'en-tête HTTP Accepts est différent de "text/html". Faites cela avec le init-object que fetch accepte comme second argument. Un exemple simple:

fetch("/api/profile",{
    headers:{
        "accepts":"application/json"
    }
})
.then(res => {
    console.log(res);
    return res.json();
})
.then(json => console.log(json) )
.catch( a => { console.log(a) });

La raison en est que WebPack Dev Server utilise normalement un contexte/un espace de nom pour différencier le contenu des services à transmettre. Les scripts create-react-app ne permettent pas d'extraire un espace-noms du chemin du proxy dans le fichier package.json. Au lieu de cela, les scripts ont le comportement par défaut d'opinion selon lequel toute requête utilisant autre chose que HTTP GET sera transmise. De plus, tout ce qui utilise HTTP GET, mais PAS text/html comme en-tête Accepts sera transféré. 

La raison en est que la plupart des applications React sont des SPA (applications à page unique) qui utilisent AJAX/Fetch pour communiquer avec certaines API. Les API utilisent normalement JSON ou XML, mais pas text/html.

1
Canis

Webpack Dev Server utilise devServer.proxy config dans votre configuration Webpack pour contrôler les demandes de proxy.

0
Jonny Buchanan