CODEWITHSUNDEEP
node.jsreactjsapiproxycreate-react-app
Radoslav Naidenov
Radoslav Naidenov

Reputation: 807

Proxy in package.json not affecting fetch request

I am trying to fetch some data from the development server using React.

I am running the client on localhost:3001 and the backend on port 3000.

The fetch request :

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

When I run my development server and webpack-dev-server I get the following output:

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

I tried specifying the proxy in the package.json so it would proxy the request to the API server, however nothing has changed.

Here is my package.json file:

enter image description here

.. and the webpack.config : enter image description here

Please tell me, if you need to see anything else from my project. I apologies, if I'm missing something and not being thorough, I'm still quite new to using these technologies.

Upvotes: 59

Views: 161547

Answers (6)

Shawn W
Shawn W

Reputation: 566

I had the same problem using axios and was only able to get it working by using the complete hostname and enabling Cors.

const response = await axios.get('http://localhost/users/');

Install cors

npm i cors

Use cors

const express = require("express");
const request = require("request");
const cors = require("cors");
const app = express();

app.use(cors());

app.use("/", (req, res) => {
  //...
});

app.listen(80, () => {
  console.log("CORS-enabled web server listening on port 80");
});

Ref

Upvotes: 3

manna
manna

Reputation: 198

The solution by user jellyfish-tom in https://github.com/webpack/webpack-dev-server/issues/793#issuecomment-316650146 worked for me.

devServer: {
  proxy: {
    "*": "http://[::1]:8081"
    // "secure": false,
    // "changeOrigin": true
  }
},

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281606

You can modify your fetch request API url to give the complete hostname since 

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

also make sure that you have CORS enabled on your backend

In case your want to redirect through webpack, your can try devServer.proxy as

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

Upvotes: 33

Canis
Canis

Reputation: 4400

I know I'm a little late to the game here, but I'll leave it here for future reference.

To make the devServer proxy work as expected, you need to specify the HTTP Accepts header to be something else than "text/html". Do this with the init-object that fetch accepts as the second argument. A simple example:

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

The reason for this is that the WebPack Dev Server normally uses a context/namespace to differentiate between what to serve and what to forward. The create-react-app scripts do not extract a namespace from the proxy path in the package.json file. Instead the scripts has the opinionated default behaviour that any request using something else than HTTP GET will get forwarded. Also, anything using HTTP GET, but NOT text/html as the Accepts header will get forwarded.

The reasoning is because most React Apps are SPA (Single Page Applications) which use AJAX/Fetch to communicate with some API. API's normally use JSON or XML, but not text/html.

Upvotes: 19

Beginner
Beginner

Reputation: 181

In the package.json

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

Upvotes: 9

Jonny Buchanan
Jonny Buchanan

Reputation: 62783

Webpack Dev Server uses devServer.proxy config in your Webpack config to control proxying requests.

Upvotes: 0

Related Questions