Fetch API can't load '.php' local file - React JS + PHP

Question

I am working on a React JS application. Where I am using PHP and MySQL at the back end and React JS at the front end. What I am trying to do is to make a simple API 'fetch()' call to the back end and to get some data. My React App is running on "http://localhost:3000/". I have made a folder called "api/index.php" in the root directory of the React Application. When I try to make the call I get the error "File not found : 404". I don't know why.

Fetch API in a component

fetch("/api/index.php", {
  method: "POST",
  headers: {
    'Content-Type': 'application/json'
  }
}).then(res => console.log(res))

Files Structure

Please note that I am running the whole app in wamp server directory www/react-app/

Dont you think you need to give path like this in React Js /api/index.php — Jaymin
@Jaymin yes, I have mistyped the code, I made an update now. — Nadeem Ahmad
How are you running your php/MySQL backend? Do you have another apache running on a different port and serve through that? If that is the case then your URL would be localhost:{apache-port}/api/index.php — Stavros Angelis

Koala Yeung Koala Yeung · Accepted Answer · 2019-09-27T10:38:01

You cannot serve php with create-react-app development server (i.e. npm run start). As @EliasSoares pointed out, your PHP needs to be parsed on server side by php-fpm or Apache's mod_php setup.

Either you should:

Build the create-react-app statically (i.e. npm run build). Then manually copy the build result, together with your /api PHP code, to the WAMP document root. This way works, but you will need to copy your JS / assets folder to WAMP every time your ReactJS code is updated.

Or
Serve PHP with WAMP on a different localhost port (say locahost:8080). Still develop your CRA application with development server (i.e. npm run start) at the same time. You need to modify your fetch URL like this:
```
fetch('http://localhost:8080/api/index.php', options).then(...);
```
This way, you need to correctly code your PHP to deal with CORS preflight request and header. If you're using some popular PHP framework, I'm sure they'd have some middleware / plugin solution for this problem.

I think the 2nd option, although more troublesome to setup, is the more flexible solution for a better development experience.

Fetch API can't load '.php' local file - React JS + PHP

3 Answers