Wie man CORS Probleme mit Redux React Express und Knoten zu überwinden?

Question

Ich habe eine React App, die React Router und Redux als Zustandsmanager verwendet. Die Serverseite der App verwendet Express und Node.

Ich mache API-Aufrufe an einen externen Dienst. Ich habe keine Möglichkeit, CORS auf dem externen Dienst zu aktivieren. Daher muss ich die Serverseite meiner App verwenden, um die Aufrufe an den externen Dienst auszuführen, um den Browser aus der Gleichung zu entfernen, und alle CORS-Fehler zu beseitigen.

Ich bin in der Lage, meine Daten vom Dienst auf der Serverseite erfolgreich zu erhalten. Ich würde gerne wissen, ob es möglich ist, den Redux-Speicher zwischen dem Client und dem Server mit irgendeiner Art von Middleware zu teilen (Suche nach Beispielen/Ressourcen).

Das Ziel:

1) weiß, ein Click-Ereignis in dem Client-Handelte eine serverseitige Route zu externer api

2) hat, die Veranstaltung nennt (nicht, wie dies zu tun)

3) Dann wird der Server verarbeitet diese Route, macht die Anforderung und sendet die Antwort an den Client (durch die reagieren Speicher geteilt - nicht sicher, ob dies möglich ist)

4) der Laden bekommt den neuen Zustand, ein d sendet dann an die Client-Seite Komponenten und die UI-Updates

Gibt es Beispiele/Tutorials von diesem? Es wird nicht nach einer Seite gesucht, die mit dem Server gerendert wurde, sondern anhand von Anleitungen, wie die obigen 4 Schritte allgemein implementiert werden können.

Answer 1

Danke für die Vorschläge.

Es stellt sich heraus, dass ich ernsthaft über die Lösung dachte. Alles, was ich wirklich brauchte, war die Möglichkeit, eine serverseitige Funktion (Ressourcen von der externen API beziehen) vom clientseitigen Ereignis (Ladekomponente) zu starten. So wie das Absenden eines Formulars, hat eine Aktion, die eine serverseitige Funktion startet.

In meiner Komponente:

componentDidMount() { 
    const product_api_results = productApi.getProductItems() 
    console.log('product_api_results in CART Component: ', product_api_results) 
    /* now I have results and can put it in the Redux Store via action to reducer for other components to work with on client */ 
    } 

Die productAPI.getProductItems(), dass die Komponente aufruft:

export function getProductItems() { 
    return axios.get('/api/get-products') // triggers a server side route 
    .then(function (response) { 
     console.log('client side response: ', response) 
     return response 
    }) 
} 

In Express server.js Datei, der Server diese URL sehen und dann bekommen die richtige Daten. Die shopify.get() stammt aus dem shopify-node-api Modul:

app.get('/api/get-products', function (req, res) { // '/api/get-products' called from client 
    shopify.get('/admin/products.json', function (err, data, headers) { 
    res.send(data) 
    }) 
})