it-swarm.com.de

Proxy in package.json wirkt sich nicht auf die Abrufanforderung aus

Ich versuche, einige Daten mithilfe von React vom Entwicklungsserver abzurufen.

Ich betreibe den Client auf localhost:3001 und das Backend auf port 3000.

Die Abrufanforderung: 

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

Wenn ich meinen Entwicklungsserver und meinen Webpack-Dev-Server betreibe, erhalte ich die folgende Ausgabe:

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

Ich habe versucht, den Proxy in package.json anzugeben, damit er die Anforderung an den API-Server weiterleitet, es hat sich jedoch nichts geändert.

Hier ist meine package.json-Datei

 enter image description here

.. und die webpack.config:  enter image description here

Bitte sag mir, wenn du noch etwas von meinem Projekt sehen willst. Ich entschuldige mich, wenn ich etwas vermisse und nicht gründlich bin, bin ich noch recht neu im Umgang mit diesen Technologien. 

6

Sie können die URL für die Abrufanforderungs-API ändern, um seitdem den vollständigen Hostnamen anzugeben 

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

stellen Sie außerdem sicher, dass Sie CORS in Ihrem Backend aktiviert haben

Falls Sie Ihr Webpack weiterleiten möchten, können Sie devServer.proxy als versuchen

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

In der package.json

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

Ich weiß, dass ich zu spät zum Spiel hier bin, aber ich lasse es hier für zukünftige Referenz.

Damit der devServer-Proxy wie erwartet funktioniert, müssen Sie den HTTP-Accept-Header als etwas anderes als "text/html" angeben. Tun Sie dies mit dem init-Objekt, das als zweites Argument von fetch akzeptiert wird. Ein einfaches Beispiel:

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

Der Grund dafür ist, dass der WebPack Dev Server normalerweise einen Kontext/Namespace verwendet, um zu unterscheiden, was zu bedienen ist und was weitergeleitet werden soll. Die Create-React-App-Skripte extrahieren keinen Namespace aus dem Proxy-Pfad in der package.json-Datei. Stattdessen haben die Skripts das standardisierte Verhalten, wonach jede Anforderung, die etwas anderes als HTTP GET verwendet, weitergeleitet wird. Alles, was HTTP GET verwendet, aber NICHT text/html als Accepts-Header, wird weitergeleitet. 

Der Grund liegt darin, dass die meisten React-Apps SPA (Single Page Applications) sind, die AJAX/Fetch verwenden, um mit einigen APIs zu kommunizieren. APIs verwenden normalerweise JSON oder XML, jedoch nicht text/html.

1
Canis

Der Webpack Dev Server verwendet devServer.proxy config in Ihrer Webpack-Konfiguration, um die Proxy-Anforderungen zu steuern.

0
Jonny Buchanan