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

问题描述

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

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

但是我有一个小问题。我无法使用 React 创建发布请求，因为此错误：Error text: ERROR - TeleBot: "A request to the Telegram API was unsuccessful. Error code: 400. Description: Bad Request: unsupported parse_mode"

我在端口 80 上运行 WampServer，这里是我的 backend.PHP 文件和另一个带有 React 应用程序的目录。在 WampServer 中是 headers_module，它是启用的，在 PHP 文件中是 header 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).。在 axios 发布请求中，我也包含 header('Access-Control-Allow-Origin: *');。请问有人知道如何解决这个问题吗？我想不通。

这是我的 axios 代码片段：

"Access-Control-Allow-Origin": "*"

这里是PHP文件的片段：

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

    });

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

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

>

Screen from net tab

解决方法

解决方案

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

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

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

并且在 axios 请求中您不需要使用标头，因此它看起来像这样：

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

    },(error) => {

    });