如何配置 apache VHost 以使用 axios.post？答案

【问题标题】：How to configure apache VHost to work with axios.post?如何配置 apache VHost 以使用 axios.post？
【发布时间】：2020-10-01 13:23:43
【问题描述】：

我正在尝试通过 POST 从 create-react-app 应用程序调用 Web 服务到在 XAMPP 上运行的本地虚拟主机（也尝试过 WAMP），并以 Windows 10 作为操作系统。

本地环境

http://test.local/ - 在 XAMPP 虚拟主机上运行的本地服务器。
http://localhost:3000 - 创建反应应用程序网址

什么调用在每种情况下都有效

axios.get 正确响应和axios.post 正确响应来自test.local/。
axios.get 正确响应和axios.post 不响应。当由 localhost:3000 制成时

我的测试中使用的代码

axios.post 来自localhost:3000 的请求失败

axios.post('http://test.local/load/notifications/', { someData: 'someVal'},
  { headers: { "Access-Control-Allow-Origin": "*" }).then((resp) => {
     console.log(resp.data); // no response in network tab of developer tools
}, (error) => {
 // The request was made but no response was received
})

我已经尝试过这个请求有和没有配置对象中的CORS设置。

PHP 测试文件位于test.local/load/notifications/index.php

<?php
header('Content-type: application/json');
header("Access-Control-Allow-Origin: *");
$mockDataFile  = "./mockData.json";
$unencoded = json_decode(file_get_contents($mockDataFile));
echo json_encode($unencoded);
?>

我在 php 页面上的 CORS 标头设置为 header("Access-Control-Allow-Origin: *");，所以我假设不是除非我的语法关闭，否则 CORS 相关。没有错误信息，端点只是不返回响应。

httpd.conf 中的目录标志

<Directory />
    AllowOverride none
    Require local
    Require ip 192.168.1.5
</Directory>

httpd-vhosts.conf中的vhost配置：

<VirtualHost *:80>
    DocumentRoot "F:\test\public"
    <Directory  "F:\test\public">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
    </Directory>
    ServerName test.local
    ServerAlias test.local
    CustomLog "logs/test.local-access.log" common
    ErrorLog "logs/test.local-error.log"
</VirtualHost>

【问题讨论】：

我原来的问题是误导的原因。我将保留原来的问题，以防其他人发现问题，就像我花了几个小时在谷歌上搜索问题而没有结果一样。这是一个毁了我一天的晦涩难懂的问题，所以希望这能减轻一些人的痛苦。
如果您选择投反对票，请发表评论，以便我改进我的条目

标签： apache axios cors wamp vhosts

【解决方案1】：

您是否故意使用<Directory />？我不确定这是否是您帖子中的拼写错误，或者是否由于目录节点的开始标记中的/ 而导致您的配置出错。

我从未在有效的 conf 中看到过这一点（尽管它可能是有效的？），但它立即引起了我的注意，就好像它是一个自闭合的 HTML 标记一样。

【讨论】：

我相信在这种情况下，斜杠是文件夹，它看起来像一个自结束标记。我切换到 XAMPP，今天将很快进行一些测试，看看问题是否已解决。我并不是 apache 的真正权威，但在示例中，我看到在特定目录配置的开始标记中有类似的内容，我相信这就是全部
修改了我的答案以显示后续目录列表和语法。希望这会消除任何混乱。

【解决方案2】：

经过进一步调查，这是由 post 请求中的负载引起的 CORS 问题。我发现如果我发出一个没有数据的 post 请求，它就像 POST 请求一样工作。通过将我的 PHP 文件更改为以下内容来解决此问题：

<?php
header('Content-type: application/json');
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: *');
$mockDataFile  = "./mockData.json";
$unencoded = json_decode(file_get_contents($mockDataFile));
echo json_encode($unencoded);
?>

丢失的部分是header('Access-Control-Allow-Headers: *');。

这就是为什么在我的 create-react-app 中很难发现问题

这似乎不是 CORS 问题，因为从开发服务器发出请求时没有错误消息。我根本没想过要删除有效负载，只是偶然我把它遗漏了并且请求有效。

从另一个虚拟主机发出请求时，我看到了错误Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

这个新的错误消息导致我在设置 Access-Control-Allow-Headers 时找到this page。我建议在设置此标志之前阅读这篇文章，因为* 允许任何事情，您可能不希望这样做。

【讨论】：