When specified, “proxy” in package.json must be a

Question

I would like to have proxy in my react client, my package.json contains:

...
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "/auth/google": {
      "target": "http://localhost:5000"
    }
   },
...

But when I ran it, I got error

When specified, "proxy" in package.json must be a string.
[1] Instead, the type of "proxy" was "object".
[1] Either remove "proxy" from package.json, or make it a string.

I tried to convert to string, no errors but proxy is not working

"proxy": "http://localhost:5000"

My App.js

<div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>hey there</p>
          <a href="/auth/google">Sign In With Google</a>
        </header>
      </div>

Answer 1

In my cases i didn't need src/setupProxy.js... I do that with axios... Check About Axios Proxy

Check in node library if you have it or not: http-proxy-middleware is optional i didn't need it!!!

Just try to restart server side, and that's it!!! Add to check:

componentDidMount(){
    axios.get('/api/path-you-want').then(response=>{
      console.log(response)
    })
  } 

Answer 2

https://github.com/facebook/create-react-app/issues/5103

Move advanced proxy configuration to src/setupProxy.js

This change is only required for individuals who used the advanced proxy configuration in v1.

To check if action is required, look for the proxy key in package.json. Then, follow the table below.

I couldn't find a proxy key in package.json No action is required! The value of proxy is a string (e.g. http://localhost:5000) No action is required! The value of proxy is an object Follow the migration instructions below. If your proxy is an object, that means you are using the advanced proxy configuration.

Again, if your proxy field is a string, e.g. http://localhost:5000, you do not need to do anything. This feature is still supported and has the same behavior.

First, install http-proxy-middleware using npm or Yarn:

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

Next, create src/setupProxy.js and place the following contents in it:

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  // ...
}

Now, migrate each entry in your proxy object one by one, e.g.:

"proxy": {
  "/api": {
    "target": "http://localhost:5000/"
    },
  "/*.svg": {
    "target": "http://localhost:5000/"
  }
}

Place entries into src/setupProxy.js like so:

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }))
  app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }))
}

You can also use completely custom logic there now! This wasn't possible before.

It's worked.

Answer 3

The issue that you are facing is because of CRA v2.

Firstly, you will not require any additional configuration if you are just using a plain string in your proxy. But the moment you use an object, you are using advanced configuration.

So, you would have to follow the steps listed below:

1. Install http-proxy-middleware by typing npm i --save http-proxy-middleware

2. Remove the entries from package.json:

"proxy": {
    "/auth/google": {
        "target": "http://localhost:5000"
    }
}

3. Now create a setup file for your proxy. You should name it setupProxy.js in your src folder on the client side and type the following code:

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(proxy('/auth/google', 
        { target: 'http://localhost:5000/' }
    ));
}

for more info check this

Answer 4

Change the proxy to something like this and hope it will work as it worked for me.

"proxy": "http://localhost:5000/auth/google"

Answer 5

This is related to a bug in create-react-app version2.

Just run

$ npm install react-scripts@next --save
$ # or
$ yarn add react-scripts@next

Answer found at:

https://github.com/facebook/create-react-app/issues/5103

Answer 6

install "http-proxy-middleware" into your client, "not inside server".

Add setupProxy.js inside of your client/src/ directory. (should be like this: client/src/setupProxy.js)

Add the below lines to it.

const proxy = require("http-proxy-middleware");

module.exports = app => {
   app.use(proxy("/auth/google", { target: "http://localhost:5000/" }));
};

That's it, get inside of your google dev console and add localhost:3000/auth/google/callback to your project.