Create-react-app: Proxy POST issue with react-scripts 1.0.x and standard HTML (login) form

[pcdv]

My app proxies all unknown requests to an external server (java).

Since version 1.0.0 (and up to latest 1.0.11) I cannot login any more. The login POST request is rejected with status 404 (the browser shows "Cannot POST /api/login").

If I roll back to 0.9.x I can login again.

If already logged in, all other POST requests seem to be accepted.

Here is the network capture of the request:

POST /api/login HTTP/1.1
Host: 0.0.0.0:3000
Connection: keep-alive
Content-Length: 26
Cache-Control: max-age=0
Origin: http://0.0.0.0:3000
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.100 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
DNT: 1
Referer: http://0.0.0.0:3000/logout
Accept-Encoding: gzip, deflate
Accept-Language: fr,en-US;q=0.8,en;q=0.6
Cookie: sessionToken=339102761274932417

login=admin&password=admin

HTTP/1.1 404 Not Found
X-Powered-By: Express
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 23
Vary: Accept-Encoding
Date: Thu, 24 Aug 2017 14:37:43 GMT
Connection: keep-alive

Cannot POST /api/login

Is this a bug report?

EDIT: I guess not since I found the explanation in the user guide.

Maybe the doc on proxying could say that login forms implemented in pure HTML will not work since it generates an Accept:text/html header.

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

4.x not tried. I'm using 6.11.2

Which terms did you search for in User Guide?

"proxy"

I found the following information:

The development server will only attempt to send requests without a text/html accept header to the proxy.

This seems to explain my problem since my login form is a standard HTML form. I'm not sure I can prevent the browser to send text/html in its accept header.

Does it mean I have to tweak my login component to perform some ajax call instead of relying on standard HTML?

Environment

1. node -v: v6.11.2
2. npm -v: 3.10.10
3. yarn --version: 0.27.5
4. npm ls react-scripts: 1.0.11

Then, specify:

1. Operating system: linux
2. Browser and version: not relevant

Thanks

[pcdv]

I confirm transforming the HTML form into an "ajax" form fixes the issue.

[Timer]

Please post your package.json.

[pcdv]

Here it is

{
  "name": "REDACTED",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8085",
  "devDependencies": {
    "flow-bin": "^0.53.1",
    "node-sass": "^4.5.3",
    "npm-run-all": "^4.0.2",
    "prettier": "^1.5.3",
    "react-scripts": "^1.0.11"
  },
  "dependencies": {
    "brace": "^0.9.0",
    "bytes": "^2.4.0",
    "classnames": "^2.2.5",
    "events": "^1.1.1",
    "flux": "^2.1.1",
    "font-awesome": "^4.7.0",
    "husky": "^0.14.3",
    "jquery": "^2.2.1",
    "lint-staged": "^4.0.3",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "prismjs": "^1.6.0",
    "prop-types": "^15.5.10",
    "query-string": "^3.0.1",
    "react": "^15.6.1",
    "react-ace": "^5.0.1",
    "react-dnd": "^2.4.0",
    "react-dnd-html5-backend": "^2.4.1",
    "react-dom": "^15.4.1",
    "react-draggable": "^1.1.3",
    "react-fontawesome": "^1.6.1",
    "react-icon": "^1.0.0",
    "react-infinite": "http://REDACTED",
    "react-redux": "^5.0.5",
    "react-resizable": "^1.4.5",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.8",
    "react-select": "^1.0.0-rc.5",
    "react-split-pane": "^0.1.61",
    "react-tabs": "^0.8.3",
    "react-treeview": "^0.4.6",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0",
    "reselect": "^3.0.1"
  },
  "lint-staged": {
    "gitDir": "../",    
    "psrv-gui/src/**/*.{js,jsx,json,css}": [
      "prettier --single-quote --write --no-semi",
      "git add"
    ]
  },
  "scripts": {
    "precommit": "lint-staged",
    "build-css": "node-sass src/scss/app.scss -o src/css",
    "watch-css": "npm run build-css && node-sass src/scss/app.scss -o src/css --watch",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "flow": "flow"
  },
  "eslintConfig": {
    "extends": "react-app",
    "plugins": [
      "prettier"
    ],
    "rules": {
      "radix": 0
    }
  }
}

[Timer]

Are all requests that need proxied under the /api prefix?

[pcdv]

Yes

Did you see that I found the explanation and fixed the issue (our comments may have crossed)?

Maybe the doc on proxying could say that login forms implemented in pure HTML will not work since it generates an Accept:text/html header.

[Timer]

I did, but you shouldn't need ajax. 😄

Replace:

{
  "proxy": "http://localhost:8085"
}

With:

{
  "proxy": {
    "/api": {
      "target": "http://localhost:8085"
    }
  }
}

This is an advanced proxy configuration that says proxy all requests under /api, skipping our heuristic.

[pcdv]

Doh!

Thanks :)

[pcdv]

Sorry but the "/api" target trick doesn't fix the issue.

I'll keep my ajax solution for now

[Timer]

Really? That'd be a bug then. I'll keep this open so we (or someone) can investigate.

[pcdv]

Well I don't know...

I tested again with a GET request from the browser and it works.

Maybe the problem is only with POST requests (or I messed up badly).

[pcdv]

Forget it. When I tested earlier, I rolled back my login page file to an earlier version in which the URL was "/login" and not "/api/login".

So, there is no bug. Sorry.

[Johnny00520]

Can I reopen this issue? I have the similar issue

[bugzpodder]

@Johnny00520 file new issue