Create-react-app: Proxy error: Could not proxy request (DEPTH_ZERO_SELF_SIGNED_CERT)

[magician11]

I've setup a Node.js server with my React app that needs to connect to external APIs via HTTPS.

So in development I've installed a self signed cert.

openssl genrsa -out localhost.key 2048
openssl req -new -x509 -key localhost.key -out localhost.cert -days 3650 -subj /CN=localhost

A snippet from my Node.js express setup looks like so

    sslOptions = {
      key: fs.readFileSync('./config/localhost.key'),
      cert: fs.readFileSync('./config/localhost.cert'),
      requestCert: false,
      rejectUnauthorized: false
    };

  https.createServer(sslOptions, app).listen(PORT, () => {
    console.log(serverStartMessage);
  });

In my package.json for the create-react-app part of the overall app I've added this snippet:

  "proxy": {
    "/auth/google": {
      "target": "https://localhost:8008"
    },
    "/api/*": {
      "target": "https://localhost:8008"
    }
  },

I had this working over HTTP, and then Google required my callbacks in console.developers.google.com to all be HTTPS. And so I refactored some of the code to ensure everything was sent over HTTPS. I have the full app working in production (as I have a properly signed and setup cert on the production server), but in development I'm struggling to get create-react-app proxying to the dev server.

So now when I goto a URL like https://localhost:3000/api/logout I get

Proxy error: Could not proxy request /api/logout from localhost:3000 to https://localhost:8008 (DEPTH_ZERO_SELF_SIGNED_CERT).

How do I get around this to get it working with a self signed cert for local development?

Thanks.

[viankakrisna]

maybe you need HTTPS=true on your .env https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development? can you fill the issue template so we can learn more about your environment? https://github.com/facebook/create-react-app/blob/next/.github/ISSUE_TEMPLATE.md

[telemmaite]

Try adding "secure":false in your proxy config in package.json.
Also check here for more options : https://webpack.js.org/configuration/dev-server/#devserver-proxy

[danielmahon]

Adding "secure": false to my package.json proxy config solved this problem for me. Thanks @telemmaite !

package.json

...
"proxy": {
    "/api": {
      "target": "https://localhost:5002",
      "secure": false
    }
  },
...

[magician11]

Perfect, works for me. Thanks @danielmahon for the snippet and @telemmaite for the link to the docs.

[andrewlamyw]

The solution is not working for me, any other solutions?

[Rajuchoudhary]

here is whats working for me:

1. I installed http-proxy-middleware
2. created src/setupProxy.js and placed the following contents in it:

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

that's it.

you can find complete solution here

[lawynnj]

@Rajuchoudhary Doesn't work for me. I think the target needs to be: 'https://localhost:5000/'.