How to set proxy for AJAX calls in a simple react app?

Question

I created simple react app as described in https://reactjs.org/docs/add-react-to-a-new-app.html and now want to make AJAX calls to the webserver (with PHP). To make it working with development server at localhost:3000 I am trying to set up proxy in package.json

"proxy": {
  "/abc": {
    "target": "http://web.local/app/path/public/abc",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

Unfortunately app answers with default index.html content. How to make proxy working when requesting /abc path?

Is there any way to test and debug proxy? When I try to open http://localhost:3000/abc I can see

[HPM] POST /abc/abc -> http://web.local/app/path/public/abc

in console. But there is no messages when I'm loading app and request is sent from the app. (I tried fetch and axios calls.)

When I build app and run it on web server, all works fine.

EDIT: Response Headers for the axios ajax call:

HTTP/1.1 404 Not Found
X-Powered-By: Express
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 143
Vary: Accept-Encoding
Date: Wed, 03 Jan 2018 17:44:02 GMT
Connection: keep-alive

For fetch:

HTTP/1.1 301 Moved Permanently
X-Powered-By: Express
Content-Type: text/html; charset=UTF-8
Content-Length: 165
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
Location: /abc/
Vary: Accept-Encoding
Date: Wed, 03 Jan 2018 17:58:37 GMT
Connection: keep-alive

And

HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Content-Type: text/html; charset=UTF-8
ETag: W/"649-W8GnY7MkgPFg6/GXObpRHPnVDeU"
Vary: Accept-Encoding
Content-Encoding: gzip
Date: Wed, 03 Jan 2018 17:58:37 GMT
Connection: keep-alive
Transfer-Encoding: chunked

Can you post the response headers of the POST request? It's probably a CORS violation. — Halcyon, Jan 03 '18 at 17:51
Added, at the moment it returns 404 also web server is started. — Taras, Jan 03 '18 at 17:57

score 0 · Accepted Answer · answered Jan 04 '18 at 15:08

I resolved issue. My php files were located in public/ dir of the app (to have them included in build). And it is accessible from development web server as static content. Now proxy checks if file exists in public/ and delivers it if possible. And if there is no such file, then rules are applied and it tries to fetch data from specified URL.

So I moved all php related files to other location and needed data are delivered from web server through proxy as inteded just with

  "proxy": "http://web.local/app/path/static"

in package.json.

Also I had to add separate command to copy content of this dir to build/ and add it to build process.

How to set proxy for AJAX calls in a simple react app?

1 Answers1