macOS Catalina下XAMPP 7.4中AngularJS调用Laravel API配置咨询

我之前在macOS Catalina上用新版XAMPP 7.4时也碰到过一模一样的问题——新版的挂载机制和界面确实和旧版差异很大，给你两个可行的解决思路，你可以根据自己的开发需求选：

方案一：配置XAMPP强制使用localhost/127.0.0.1访问htdocs #

这个方案适合不想改动前端代码，只想让XAMPP回到旧版访问逻辑的场景：

1. 打开XAMPP的「Volumes」面板（就是你点击Mount的页面），点击Explore进入挂载的XAMPP目录
2. 找到并编辑etc/httpd.conf文件（也可以直接通过路径/Applications/XAMPP/xamppfiles/etc/httpd.conf打开）
3. 找到Listen指令，把默认的Listen 80或Listen 0.0.0.0:80修改为：

   Listen 127.0.0.1:80
   

   或者直接绑定localhost：

   Listen localhost:80
   

4. 继续找到ServerName指令，设置为：

   ServerName localhost:80
   

5. 保存文件后，回到XAMPP面板先点击Unmount，再重新Mount并重启Apache服务。现在访问localhost就能直接指向htdocs目录，AngularJS的API调用无需修改即可正常工作。

方案二：配置AngularJS动态切换API地址（不影响生产环境） #

如果需要保留XAMPP的新IP（比如要让局域网其他设备访问API），可以给AngularJS做环境区分配置，确保本地开发和生产环境互不影响：

1. 在AngularJS项目根目录创建两个配置文件：
   • config.dev.js（本地开发用）：

     angular.module('你的项目模块名').constant('API_BASE_URL', 'http://XAMPP生成的新IP/api');
     

   • config.prod.js（生产环境用）：

     angular.module('你的项目模块名').constant('API_BASE_URL', 'http://生产服务器域名/api');
     

2. 在项目入口HTML文件中，根据当前环境加载对应配置：

   <!-- 本地开发时加载这个 -->
   <script src="config.dev.js"></script>
   <!-- 生产部署时替换成下面的 -->
   <!-- <script src="config.prod.js"></script> -->
   

3. 在所有API调用的地方，使用这个常量拼接地址：

   $http.get(API_BASE_URL + '/users')
     .then(function(response) {
         // 业务逻辑处理
     });
   

4. 额外注意跨域问题：如果你的AngularJS项目是通过file://协议直接打开的静态文件，调用XAMPP新IP的API会触发跨域限制。这时候需要在Laravel中配置CORS：
   • 在Laravel的app/Http/Middleware目录下创建Cors.php中间件：

     <?php
     namespace App\Http\Middleware;
     
     use Closure;
     
     class Cors
     {
         public function handle($request, Closure $next)
         {
             return $next($request)
                 ->header('Access-Control-Allow-Origin', '*')
                 ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                 ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
         }
     }
     

   • 打开app/Http/Kernel.php，将这个中间件添加到$middleware数组中，跨域问题即可解决。

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