将 React 应用程序中的请求发布到本地主机上 Apache 服务器中的 PHP 文件时出现 CORS 错误

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). 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

Answer 1

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) => {

    });