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

Question

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

\n

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

\n

但我有一个小问题。我无法使用 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 \xe2\x80\x98access-control-allow-origin\xe2\x80\x99 is not allowed according to header \xe2\x80\x98Access-Control-Allow-Headers\xe2\x80\x99 from CORS preflight response).

\n

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

\n

这是我的 axios 代码片段：

\n

const options = {\n      headers: {\n          "Access-Control-Allow-Origin": "*",\n          "Content-Type": "application/json",\n      }\n    };\n\n    axios.post("http://192.168.0.52:80/backend/backend.php", {\n      ico: this.state.ico,\n      name: this.state.name,\n      searchFirm: true\n    }, options)\n    .then((response) => {\n\n    }, (error) => {\n\n    });\n

\n

这是 php 文件的片段：

\n

<?php\nheader(\'Access-Control-Allow-Origin: *\');\nrequire_once "DbConnect.php";\necho "ahoj";\n...\n

\n

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

\n

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

\n

从网络选项卡屏幕

\n

Answer 1

解决方案

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

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

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

在 axios 请求中，您不需要使用标头，因此它可以如下所示：

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

    }, (error) => {

    });