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

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! I have got this working response from this link and hence sharing-https://github.com/facebook/create-react-app/issues/5103

Answer 2

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

    When specified, "proxy" in package.json must be a string.
    Just change `"proxy": "http://localhost:5000"` and you are good to go.
    If that doesn't solve the problem then register your proxy using **http-proxy-middleware**

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

    Then create setypProxy.js file under src directory the put the following code.
const proxy = require('http-proxy-middleware');
module.exports = app => {
  app.use(
    proxy('/auth/google', {
      target: 'http://localhost:5000'
    })
  );
 app.use(
    proxy('/auth/facebook', {
      target: 'http://localhost:6000'
    })
  );
};

Answer 3

I think it is "create-react-app" issue.

You can go to https://github.com/facebook/create-react-app/issues/5103 to migration to the new proxy handling method.

For short, you just need to install a new library called "http-proxy-middleware"

npm install http-proxy-middleware --save

And then create a new file "src/setupProxy.js", and type

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

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

Hope this can solve your problem, happy hacking!

Answer 4

After creating a file in the client side (React app ) called src/setupProxy.js make sure you restart the server. The package.json file needs to restarted since you were you are dealing with a file outside the source directory.

Answer 5

app.use(
  '/api',
  proxy({ target: 'http://www.example.org', changeOrigin: true })
);


changeOrigin:true