CORS error when posting request in React app to PHP file in Apache server on localhost

Question

I am creating simple app for fetching icos and firm names from one site. I have this project already done with JQuery and now I am trying to learn React and do the same in it.

First part of this project is form with ico and name inputs. On submit, it create post request to php file, which checks, if inserted values are in database or not and if so, then checks if they are younger than one month. After that, it returns rows from database or from website (from website it is up to date).

But I have small problem. I cant create post request with React because this error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.0.52:80/backend/backend.php. (Reason: header ‘access-control-allow-origin’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

I have WampServer running on port 80 where is my backend.php file and another direstory with React app. In WampServer is headers_module, which is enabled and in php file is header header('Access-Control-Allow-Origin: *');. In axios post request I am including "Access-Control-Allow-Origin": "*" too. Please does someone know, how to fix this? I cant figure it out.

Here is my axios code snippet:

const options = {
      headers: {
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "application/json",
      }
    };

    axios.post("http://192.168.0.52:80/backend/backend.php", {
      ico: this.state.ico,
      name: this.state.name,
      searchFirm: true
    }, options)
    .then((response) => {

    }, (error) => {

    });

And here is snippet from php file:

<?php
header('Access-Control-Allow-Origin: *');
require_once "DbConnect.php";
echo "ahoj";
...

http://192.168.0.52:80/backend/backend.php in browser works fine.

EDIT: But what is interesting is that, when I send the request, it returns two lines in net tab and when I open the second line and there at the top right corner click "send again", it passes.

Screen from net tab

Tomáš Kretek · Accepted Answer · 2021-02-28 18:13:55Z

5

Solution

After days of searching, I came up with a solution. Hopefully it will help someone.

All you need to do is add this two lines to php file:

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: Content-Type');

And in axios request you dont need to use headers, so it can looks like this:

axios.post("your_url", {
      your_data
    })
    .then((response) => {

    }, (error) => {

    });

answered Feb 28, 2021 at 18:13

Tomáš Kretek

4874 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Indication Over a year ago

I do not think this is of any help to others.

Tomáš Kretek Over a year ago

@Indication you can add your solution if you want.

Indication Over a year ago

sometimes the solution is inside the code you write. If your local apache server is not started and you run your code on npm, you would get similar error, and sometimes the error is inside your php coding. In my case the error was inside the code and not the headers.

Collectives™ on Stack Overflow

CORS error when posting request in React app to PHP file in Apache server on localhost

1 Answer 1

Solution

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related