Proxy dans le paquet.json n'affectant pas de demande de récupération

Je suis en train de récupérer des données à partir du serveur de développement à l'aide de Réagir.

Je suis en cours d'exécution le client sur localhost:3001 et le backend sur port 3000.

La demande de récupération :

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

Quand je lance mon serveur de développement et webpack-dev-serveur j'obtiens le résultat suivant:

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

J'ai essayé en précisant le proxy dans le paquet.json donc, il serait de procuration de la requête à l'API du serveur, cependant rien n'a changé.

Voici mon paquet.fichier json:

Proxy dans le paquet.json n'affectant pas de demande de récupération

.. et la webpack.config :
Proxy dans le paquet.json n'affectant pas de demande de récupération

S'il vous plaît dites-moi, si vous avez besoin de voir autre chose de mon projet. J'ai des excuses, si je suis absent quelque chose et de ne pas être rigoureux, je suis encore assez nouveau à l'aide de ces technologies.

Si votre serveur s'exécute sur localhost:3000 alors modifier votre fetchRequest comme fetch('http://localhost:3000/api/users') assurez-vous également que vous avez la scro activé sur votre backend
Permet-il de résoudre votre problème
Oui, je voulais proxy de la requête à l'api du serveur, cependant cela ne fonctionne pas, mais de faire une demande directement à http://localhost:3000/api/users fonctionne correctement.
Je pense que le problème vient de vos conventions de nommage 🙂

OriginalL'auteur Radoslav Naidenov | 2017-06-05

10

Vous pouvez modifier votre demande de récupération de l'API url de donner le nom d'hôte complet depuis
```
 fetch('http://localhost:3000/api/users') 
```
assurez-vous également que vous avez CORS activé sur votre backend

Dans le cas où vous souhaitez rediriger thourgh webpack, vous pouvez essayer devServer.proxy comme
```
devServer: { 
    inline: true, 
    contentBase: './dist', 
    port: 3001, 
    proxy: { "/api/**": { target: 'http://localhost:3000', secure: false }  }
 }
```
Vous ne devriez jamais permettre à la scro.
Je ne serais pas d'accord avec votre commentaire complètement, vous devez activer la scro quand vous en avez besoin pour servir de données pour un frontend qui est sur un autre domaine, cependant, je suis d'accord que vous pourriez vouloir mettre un filtre sur les domaines qui vous avez confiance
Une autre chose que je voudrais ajouter, c'est que assurez-vous https: false si votre proxy ne pas utiliser https sinon ça va causer des problèmes.

OriginalL'auteur Shubham Khatri

Dans le package.json

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

OriginalL'auteur Jose Pinheiro

1

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 faire de la devServer proxy fonctionne comme prévu, vous devez spécifier le HTTP Accepte d'en-tête pour être autre chose que "text/html". Faire cela avec l'initialisation de l'objet qui extraire accepte comme deuxième 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 pour cela est que le WebPack Serveur de Dev utilise normalement un contexte/espace de noms de différencier entre ce que pour servir et ce à l'avant. Créer réagir l'application les scripts ne pas extraire d'un espace de noms à partir du chemin du proxy dans le package.json fichier. Au lieu de cela les scripts a la opiniâtre comportement par défaut que toute demande en utilisant autre chose que de HTTP GET aurez transmis. Aussi, quoi que ce soit à l'aide de HTTP GET, mais PAS text/html comme le Accepts d'en-tête sont acheminés.

Le raisonnement est parce que la plupart Réagir Applications sont SPA (Single Page Application) qui utilisent AJAX/Fetch pour communiquer avec certaines API. L'API est normalement à l'utilisation de JSON ou XML, mais pas text/html.

OriginalL'auteur Canis
0

Webpack Serveur de Dev utilise devServer.proxy config dans votre Webpack config pour le contrôle de l'utilisation de proxy demandes.

Merci pour la réponse rapide. J'ai essayé en précisant le proxy dans le devServer, cependant elle n'est pas toujours rediriger la requête vers le serveur d'api. devServer: { inline: true, contentBase: './dist', port: 3001, proxy: { "/api": "http://localhost:3000" } } La général des en-têtes dans l'onglet réseau: Request URL:http://localhost:3001/api/users Request Method:GET Status Code:304 Not Modified Remote Address:127.0.0.1:3001

OriginalL'auteur Jonny Buchanan

Vous devez vous connecter pour publier un commentaire.