web-dev-qa-db-fra.com

Comment créer un proxy dans React/Webpack pour appeler une API externe

Je souhaite envoyer une demande GET à une API externe que je ne contrôle pas. En raison de la sécurité de l'API, mon application react ne peut pas directement envoyer de demande ajax au noeud final. Par conséquent, j'essaie de créer un proxy simple comme démontré ici

Mon package.json file ressemble à ceci:

{
  "name": "my-stack",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "https://gold-feed.com/paid/*": {
        "target": "https://gold-feed.com/paid",
        "changeOrigin": true
    }
  }
}

Et puis ma demande ajax ressemble à ceci:

const apiUrl = 'https://gold-feed.com/paid/<apiID>/all_metals_json_usd.php';

jQuery.ajax({
  method: 'GET',
  url: apiUrl,
  success: (item) => {
    this.props.addItem(item);
  }
});

Mais il ne semble rien faire. Je reçois toujours l'erreur suivante:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

J'ai essentiellement le même problème que documenté ici où il essaie de créer un proxy pour accéder à l'api Steam.

Et juste une note de côté, je crois que le projet de création-réaction-application que j'utilise est superposé à Webpack.

reactjswebpackproxycreate-react-app
7
reknirt

Vous l'avez probablement déjà compris, mais pour d'autres, voici ce qui a bien fonctionné pour moi:

"proxy": {
    "/proxy": {
        "target": "https://mybackend.com",
        "pathRewrite": {
                "^/proxy" : ""
        },
        "changeOrigin": true
    }
}

alors myreact.com/proxy/my/path est redirigé vers mybackend.com/my/path

Je pense que l’erreur dans votre cas est que vous mettez la destination comme clé pour votre proxy au lieu de chemin sur votre serveur de réaction.

4
Antoine

Pour mon cas, mon api a été déployé sur AWS, j'ai trouvé ce paramètre 

"changeOrigin": true

était nécessaire (chrome & Edge travaillé, firefox (62.0.3) s'est plaint de "demande CORS non valide").

Dans la documentation du proxy Webpack http, ils indiquent cette option: ( https://github.com/chimurai/http-proxy-middleware )

Conseil: Définissez l'option changeOrigin sur true pour les sites hébergés virtuels basés sur un nom.

remarques:

  • exécuter l’API localement sur la même machine n’exigeait pas cela pour Fox Fox.
  • firefox ajoute l’en-tête "Origin" qui, lorsque j’ai retiré et renvoyé la requête, a fonctionné.
  • l'ajout de "changeOrigin" n'a pas d'effets secondaires, donc je le ferai à partir de maintenant.

Je ne sais pas s'il s'agit d'un bogue dans firefox ou quoi, ma configuration finale était de toute façon:

"proxy": {
  "/api": {
    "target": "<put ip address>",
    "changeOrigin" : true
  }
}

vous devez remplacer/api par le chemin de votre API ou réécrire le chemin comme indiqué ci-dessus.

0
Bashar Ali Labadi