wake-up-neo.net

So erstellen Sie einen Proxy in React/Webpack, um eine externe API aufzurufen

Ich möchte eine GET-Anforderung an eine externe API ausgeben, die ich nicht kontrolliere. Aufgrund der Sicherheit der API kann meine reagierende App keine Ajax-Anforderung direkt an den Endpunkt senden. Deshalb versuche ich, einen einfachen Proxy zu erstellen, wie gezeigt hier

Mein package.json file sieht so aus:

{
  "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
    }
  }
}

Und dann sieht meine Ajax-Anfrage so aus:

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);
  }
});

Aber es scheint nichts zu tun. Ich erhalte immer noch folgenden Fehler:

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

Ich habe im Wesentlichen das gleiche Problem wie hier , wo er versucht, einen Proxy für den Zugriff auf die Steam-API zu erstellen.

Und nur eine Randbemerkung, ich glaube, das von mir verwendete Create-React-App-Projekt huckt aus dem Webpack.

7
reknirt

Sie haben es wahrscheinlich schon herausgefunden, aber für andere ist das, was für .__ gearbeitet hat.

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

so wird myreact.com/proxy/my/path zu mybackend.com/my/path umgeleitet

Ich denke, der Fehler in Ihrem Fall ist, dass Sie das Ziel als Schlüssel für Ihren Proxy anstelle des Pfads auf Ihrem Reaktionsserver angeben.

4
Antoine

Sie können eine externe API für localhost proxen, den Frontend-Ursprung (localhost: 3000) und den Zielserver ändern, das Token bei Bedarf aktualisieren und das folgende Skript auf dem Knoten js ausführen

const express = require('express');
const proxy = require('express-http-proxy');
const cors = require("cors");

const app = express();

app.use(
  cors({
    Origin: 'localhost:3000',
    credentials: false
  })
);

app.use('/', proxy('https://www.targetserver.com/', {
  proxyReqPathResolver: function (req) {
    return req.url;
  },
  proxyReqOptDecorator: function (proxyReqOpts, srcReq) {
    proxyReqOpts.headers = {'Authorization': 'Replace with JWT'};
    return proxyReqOpts;
  }
}))

app.get('/*',function(req,res,next){
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});


app.listen(4000, () => console.log(`Server Listening on port ${4000}!`));

Verwenden Sie es in Ihrer Fontend-Anwendung wie folgt (mit Axios oder Fetch):

axios.get('http://localhost:4000/api/route).then(x => console.log(x));
0
Mario Lucki

Für meinen Fall wurde mein API auf AWS bereitgestellt. Ich fand diese Einstellung 

"changeOrigin": true

war notwendig (Chrome & Edge gearbeitet, Firefox (62.0.3) beanstandet "Ungültige CORS-Anfrage").

In der Dokumentation des Webpack-HTTP-Proxys wird diese Option angegeben: ( Https://github.com/chimurai/http-proxy-middleware )

Tipp: Setzen Sie die Option changeOrigin für namenbasierte virtuelle gehostete Sites auf true.

anmerkungen:

  • wenn Sie das API lokal auf derselben Maschine ausführen, ist dies für Feuerfuchs nicht erforderlich.
  • firefox fügt den Header "Origin" hinzu, der beim Entfernen und erneuten Senden der Anforderung funktionierte.
  • das Hinzufügen von "changeOrigin" hat keine Nebenwirkungen, also werde ich es ab jetzt tun.

Ich bin mir nicht sicher, ob es ein Fehler in Firefox ist oder was auch immer, meine endgültige Konfiguration war:

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

sie sollten/api durch den Pfad Ihrer API ersetzen oder den Pfad als obige Antwort neu schreiben.

0