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

Question

我正在创建一个简单的应用程序，用于从一个站点获取 icos 和公司名称。我已经用 JQuery 完成了这个项目，现在我正在尝试学习 React 并在其中做同样的事情。

该项目的第一部分是带有 ico 和名称输入的表单。提交时，它会创建 post 对 php 文件的请求，该文件检查插入的值是否在数据库中，如果是，则检查它们是否小于一个月。之后，它 returns 来自数据库或网站的行（来自网站是最新的）。

但我有一个小问题。我无法使用 React 创建 post 请求，因为这个错误：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).

我在端口 80 上有 WampServer 运行，我的 backend.php 文件和另一个带有 React 应用程序的目录。在 WampServer 中是 headers_module，已启用，在 php 文件中是 header header('Access-Control-Allow-Origin: *');。在 axios post 请求中，我也包含了 "Access-Control-Allow-Origin": "*"。请有人知道，如何解决这个问题？想不通了。

这是我的 axios 代码片段：

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

    });

这里是 php 文件的片段：

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

http://192.168.0.52:80/backend/backend.php 在浏览器中工作正常。

编辑：但有趣的是，当我发送请求时，它 returns 网络选项卡中的两行，当我打开第二行并在右上角单击“再次发送” , 它通过了。

Screen from net tab

Answer 1

解决方案

经过几天的搜索，我想出了一个解决方案。希望它能对某人有所帮助。

您需要做的就是将这两行添加到 php 文件中：

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

而在 axios 请求中你不需要使用 headers，所以它看起来像这样：

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

    }, (error) => {

    });

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

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

javascript

api

localhost

reactjs

axios

解决方案