Create-React-App Proxy error

Question

I am creating a create-react-app.

I am using an existing API (its written in MVC C# web api).

The API I want the React app to use is at : https://api.myserver.com.au

I am running the development version of React from http://localhost

When I go live, I will always be hosting my React app from a different location to the API. Ie i'll host it at https://my.cool.app and the API will still e at https://api.myserver.com.au

my package.json is as follows:

{
  "name": "hbi.contractor",
  "version": "0.1.0",
  "private": true,
  "proxy": {
    "/api/*": {
      "target": "https://api.myserver.com.au"
    }
  },
  "dependencies": {
    "axios": "^0.17.1",
    "jquery": "^3.2.1",
    "materialize-css": "^0.100.2",
    "nodemon": "^1.14.11",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-form": "^2.16.1",
    "react-live-clock": "^2.0.2",
    "react-load-script": "0.0.6",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-materialize": "^1.1.2"
  }
}

When I set the proxy to a development MVC C# local host server, it works fine, however when on the live API server and development React, I try and browse to:

http://localhost:3000/api/Acccount/GetUser

and the respone is:

Proxy error: Could not proxy request /api/Acccount/GetUser from localhost:3000 to https://api.myserver.com.au (ECONNRESET).

in the terminal its very similar with this message:

Proxy error: Could not proxy request /api/Acccount/GetUser from localhost:3000 to https://api.myserver.com.au.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

[HPM] Error occurred while trying to proxy request /api/Acccount/GetUser from localhost:3000 to https://api.myserver.com.au (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors
)

Is there a way I can step through to debug the Node (express i assume) Server so I can get more detail of this error?

I have fiddler open, and it does not look like there is any attempt to access the remote proxy server.

Is the proxy functionality the right functionality considering I plan to keep it this way in the live version?

Any help would be appreciated.

Answer 1

I've solved this by updating my package.json file:

  "proxy": {
    "/api/*": {
      "target": "https://api.hbiaustralia.com.au",
      "changeOrigin": true
    }
  },

But im wonder is the "proxy" good to use on my Live site? or is it a development tool and the live site should be created differently?

Answer 2

I think in the meantime the problem is solved.

Yes, the proxy is a development tool and your react part should be static content usually. See proxy server documentation:

Keep in mind that proxy only has effect in development (with npm start), and it is up to you to ensure that URLs like /api/todos point to the right thing in production.

In your case there is a different host for the api. This should be solved through a suitable environment setup. (loadbalancer, proxy or whatever) Then you can keep the relative paths.

Otherwise, the host:port portion must be configured per env variable or config deployment and rewrite to absolute paths in your React App. see here

Answer 3

You are making an ajax request from your localhost to a different domain. this is counted as CORS request. to circumvent this you need to use proxy. since proxy is the part of the create react app, your browser assumes it is always pointed to the create-react-app, browser does not know that proxy is there. to solve the issue follow those steps:

In the client side directory:

npm i http-proxy-middleware --save

Create setupProxy.js file in client/src. No need to import this anywhere. create-react-app will look for this directory

Add your proxies to this file.

const proxy=require("http-proxy-middleware")
module.exports=function(app){
    app.use(proxy(['/api'],{target:"http://localhost:8888"}))}

We are saying that make a proxy and if anyone tries to visit the route /api on our react server, automatically forward the request on to localhost:8888.