Mac下使用XAMPP时POST请求因访问控制检查报错如何解决

这个报错是浏览器的同源策略触发的CORS（跨源资源共享）限制：你的React开发服务默认运行在3000端口，而XAMPP的Apache运行在80端口，端口不同属于不同源，跨域POST请求会被浏览器自动拦截。

方法1：PHP接口添加CORS头（本地调试最快捷） #

在你的authentication.php文件最顶部添加以下代码：

<?php
// 替换为你实际的React前端访问地址，默认React开发端口是3000
header('Access-Control-Allow-Origin: http://localhost:3000');
// 允许的请求方法
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
// 允许的请求头
header('Access-Control-Allow-Headers: Content-Type');
// 处理浏览器预检请求
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    exit();
}
// 下方编写你原有的PHP业务代码
?>

方法2：React开发环境配置代理（无侵入适配本地开发） #

如果你是用Create React App创建的项目，直接在项目根目录的package.json中新增一行配置：

"proxy": "http://localhost:80"

然后修改你的请求代码为相对路径即可：

export async function doLogin(data: LoginCredentials) {
  const res = await axios.post('/project/authentication.php', data);
  return res.data;
}

React开发服务会自动把接口请求转发到80端口的Apache服务，不会触发跨域限制。

方法3：配置Apache虚拟主机（推荐，更贴近生产环境） #

通过配置虚拟主机让前后端使用同一端口访问，从根源避免跨域问题：

• 打开XAMPP的Apache配置文件httpd.conf，找到Include etc/extra/httpd-vhosts.conf这一行，去掉行首的#启用虚拟主机配置
• 编辑httpd-vhosts.conf文件，添加如下配置：

<VirtualHost *:80>
    DocumentRoot "/path/to/your/react/project" # 替换为你的React项目路径
    ServerName local.test
    # 接口请求转发到PHP项目目录
    Alias /project "/path/to/xampp/htdocs/project"
    <Directory "/path/to/xampp/htdocs/project">
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

• 修改Mac的/etc/hosts文件，新增一行127.0.0.1 local.test
• 重启Apache后，用http://local.test访问前端，接口请求用相对路径即可，不会触发跨域。

内容的提问来源于stack exchange，提问作者Croicco