Laravel API 返回 HTTP 0 错误答案

【问题标题】：Laravel API return HTTP 0 errorLaravel API 返回 HTTP 0 错误
【发布时间】：2018-07-07 19:45:33
【问题描述】：

我使用相应的参数访问我的 Laravel API 端点，返回 HTTP 0 错误。

$(document).ready(function() {

            $('#customer_name').change(function() {

                $.ajax({
                    url: "http://acmexponents.com/api/v1/untransportamts",                    
                    dataType: "json",
                    type: "POST",

                    data: {
                        'pickupaddress': 'Ampang Jaya Selangor Malaysia',
                        'deliveryaddress': 'Bukit Bintang Kuala Lumpur Federal Territory of Kuala Lumpur Malaysia',
                        'pickupdate': '2018-01-24',
                        'pickuptime': '14:30',
                        'vehicletype': 2,
                        'vehiclesize': 3,
                    },


                    success: function(response) {                         
                        $("#customer_address").val(json); 
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                       alert(jqXHR.status);
                       alert(textStatus);
                       alert(errorThrown);
                    }

                });
             });

});

完整的错误文本：

Javascript 返回 HTTP 0 错误。这可能是一个常见原因发生的是您从服务器请求了跨域资源响应中未包含适当的 CORS 标头。最好打开你的 Firebug...

如何解决。

【问题讨论】：

你需要设置允许哪些headers，才能获得跨域资源共享！
最好打开你的 Firebug...

标签： ajax laravel api laravel-5.3 laravel-5.4

【解决方案1】：

什么是CORS（跨域资源共享）：

我们了解 Javascript 受 same origin policy 限制，即无法发出越过其来源（不同域名等）的请求。这对于使用不同域名作为 Web 服务的 Web 所有者来说很麻烦，尽管所有内容都归同一个所有者所有。

为了绕过同源策略，引入了 CORS，以便 Web 服务器可以显式允许 javascript 发出请求，尽管源已经越过了。它可以通过 Apache、PHP 或任何 http 代理来实现，只要能够发送响应头，就可以实现这种机制。

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

有几种方法可以将 CORS 标头发送到您的应用。一种选择是包含一个向每个请求发出 CORS 标头的中间件。此类确保您的服务器允许所有人向该服务器发出请求（不太推荐，随意调整）。

新建文件app/Http/Middleware/CorsMiddleware.php

class CorsMiddleware
{
    public function handle($request, \Closure $next)
    {
        $headers = [
            'Access-Control-Allow-Origin' => '*',
            'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age' => '86400',
            'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With'
        ];

        if ($request->isMethod('OPTIONS')) {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }

        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }

        return $response;
    }
}

如果您使用 Lumen，请在您的 app.php 中包含中间件：

$app->middleware([
    //...
    App\Http\Middleware\CorsMiddleware::class,
    //...
]);

CORS 中间件源代码：https://gist.github.com/danharper/06d2386f0b826b669552#gistcomment-1694593

【讨论】：