Create-react-app: Https proxy is displaying UNABLE_TO_VERIFY_LEAF_SIGNATURE error

[edolyne]

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

SSL, Proxy

Environment

1. node -v: 8.4.0
2. npm -v: 5.3.0
3. yarn --version (if you use Yarn): 1.3.2
4. npm ls react-scripts (if you haven’t ejected): [email protected]

Then, specify:

1. Operating system: MacOS High Sierra
2. Browser and version (if relevant): Chome

Steps to Reproduce

(Write your steps here:)

1. Set proxy in package.json to:

"proxy": {
    "/api": {
      "target": "https://metachurch.dev"
    }
  }

Above is a local site using laravel valet, and secured using a self signed certificate

1. Set .env file in react app folder that includes

ENVIRONMENT="dev"

REACT_APP_GRAPHQL_URI="/api"
NODE_TLS_REJECT_UNAUTHORIZED=0
HTTPS=true

1. Start React App
2. Error is displayed

Proxy error: Could not proxy request /api from localhost:3000 to https://metachurch.dev.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (UNABLE_TO_VERIFY_LEAF_SIGNATURE).

Expected Behavior

React app is starts and traffic sent to /api is routed through to https://mydomain.dev/api rather than https://localhost:3000/api

Actual Behavior

React app starts, but traffic is being routed to https://localhost:3000/api, and a proxy error message is displayed in terminal

[heyimalex]

Have you tried everything in this SO answer?

[edolyne]

@heyimalex I went through and tried some of the potential fixes that I hadn't previously tried, but still ended up with the same error.

[AlexanderHolman146]

@edolyne I'm running into the same problem. The frustrating part is if I visit localhost:3000 (create react server) and localhost:5000 (API server) they are both HTTPS verified. But for some reason, the proxy breaks down.

+1 on this problem

[ds82]

I had the same problem and looked into react-scripts whats actually happening with the proxy config from package.json. The config is just passed to webpack devserver which supports a secure: false option that disables certificate check.

I adjusted my config like this:

  "proxy": {
    "/api": {
      "target": "https://localhost:8443",
      "pathRewrite": {
        "^/api": ""
      },
      "secure": false
    }
  },

and now it works 🙂