create-react-app proxy requests to php backend

Question

I'm running a Lumen (5.3) API via $ php -S localhost:8888 -t public when I hit any endpoint through postman it works without fail. However, when I try to curl localhost:8888/v1/auth/login for example I am given the following error:

curl: (7) Failed to connect to localhost port 8888: Connection refused

I did some poking around before asking this question and some users were saying that I may need to enable CORS for some of my routes. So I went ahead and installed https://github.com/barryvdh/laravel-cors#lumen and applied it to all routes.

However, I'm still unable to hit any endpoints from my terminal window.

The End Goal

Ultimately, the goal is to proxy requests from a react application to the lumen backend, but I keep getting connection refused.

Proxy error: Could not proxy request /v1/auth/login from localhost:3000 to http://localhost:8888/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Is it possible that I have misconfigured the handle CORS middleware in lumen?

Update

I managed to my react application to make a request to my lumen API by just injecting the full path in the request. For example, instead of /v1/auth/login the path is now http://localhost:8888/v1/auth/login. I managed to get this to work by adding mode: 'no-cors' to my fetch:

function login(userData, onError, cb) {
  return fetch('http://localhost:8888/v1/auth/login', {
    mode: 'no-cors',
    method: 'post',
    body: JSON.stringify(userData),
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
  }).then(checkStatus)
    .then(parseJSON)
    .then(cb)
    .catch(onError);
}

Without mode: no-cors

Ideally I would just like to return fetch('/v1/auth/login', {and proxy the request without mode: no-cors but this does not seem to be working. Any idea why?

Also, the issue with curl still persists.

Answer 1

It turns out that by starting my php backend with $ php -S localhost:8888 -t public was causing the brunt of the problem. After digging through create-react-app issues I found that one user was having a similar issue with a php backend (https://github.com/facebookincubator/create-react-app/issues/800).

The solution is to start the server like so: $ php -S 0.0.0.0:8888 -t public this will allow create-react-app to properly proxy requests to the php server. This also allowed me to curl localhost:8888

Additionally, I needed to uncomment always_populate_raw_post_data = -1 in my php.ini file per (Warning about `$HTTP_RAW_POST_DATA` being deprecated)

My setup as follows:

package.json

{
  "name": "client",
  "version": "0.4.2",
  "private": true,
  "devDependencies": {
    "enzyme": "^2.6.0",
    "react-addons-test-utils": "^15.4.1",
    "react-scripts": "0.7.0"
  },
  "dependencies": {
    "isomorphic-fetch": "^2.2.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router-dom": "^4.2.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:8888/"
}

fetch from client-side

function login(userData, onError, cb) {
  return fetch('/v1/auth/login', { // <-- this works correctly now
    method: 'post',
    body: JSON.stringify(userData),
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
  }).then(checkStatus)
    .then(parseJSON)
    .then(cb)
    .catch(onError);
}

Hopefully this will help anyone else experiencing a similar issue.