AngularJS请求URL错误：Laravel API域名不符问题排查

我在Laravel中搭建了API，其虚拟主机地址为api.shop.local。但当我通过AngularJS发送POST请求时，控制台Network标签中显示的Request URL为client.shop.local，而非预期的api.shop.local。请问我哪里操作有误？以下是我的代码：

$scope.login = function (data) { 
    console.log(data); 
    $http({ 
        method: 'POST', 
        url: 'authenticate', 
        data: {email: data.username, password: data.password} 
    }).then( function (res) {
        // 后续逻辑
    });
}

可能的原因和解决方法 #

• 相对路径搞的鬼：你写的url: 'authenticate'是相对路径，浏览器会自动基于当前页面的域名（也就是client.shop.local）来拼接完整请求地址，自然就不会指向API的域名了。

  • 解决办法很简单，把URL改成完整的绝对路径就行，比如：

    $http({ 
        method: 'POST', 
        url: 'http://api.shop.local/authenticate', 
        data: {email: data.username, password: data.password} 
    })
    

    要是怕以后改域名麻烦，还可以在AngularJS里先定义一个API基础地址的常量，后续直接复用：

    // 先在你的Angular模块里定义常量
    angular.module('yourAppName').constant('API_BASE', 'http://api.shop.local');
    
    // 然后在控制器里注入并使用
    angular.module('yourAppName').controller('YourController', function($scope, $http, API_BASE) {
        $scope.login = function (data) { 
            console.log(data); 
            $http({ 
                method: 'POST', 
                url: API_BASE + '/authenticate', 
                data: {email: data.username, password: data.password} 
            }).then( function (res) {
                // 后续逻辑
            });
        }
    });
    

• 别忘了处理跨域问题：改完URL后大概率会遇到跨域报错，毕竟client.shop.local和api.shop.local属于不同域名。这时候得在Laravel API里配置CORS：

  • 最简单的方式是用laravel-cors包，按照文档安装配置就行；要是不想用包，也可以手动写个中间件添加跨域响应头：

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

    记得把这个中间件注册到你的API路由组里哦。

• 检查API虚拟主机是否正常：最后再确认下api.shop.local本身能不能正常访问，直接在浏览器里敲http://api.shop.local/authenticate看看有没有响应，排除API本身的配置问题。

内容的提问来源于stack exchange，提问作者Mateusz Kibiłko