Laravel API return HTTP 0 error - ajax

Question

I access my Laravel API Endpoints with respective Params its return HTTP 0 Error.
$(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);
}
});
});
});
Full Error Text :
Javascript returned an HTTP 0 error. One common reason this might
happen is that you requested a cross-domain resource from a server
that did not include the appropriate CORS headers in the response.
Better open up your Firebug...
How to resolve It.

Answer 1

What is CORS (Cross-origin resource sharing):
We understand that Javascript is restricted by same origin policy, i.e, could not make request that crossed its origin (different domain name etc). This is troublesome for web owners that is having different domain name as their web service although everything is owned by the same owner.
To bypass same origin policy, CORS is introduced such that a web server can explicitly allow javascript from making requests although the origin has crossed. It can be achieved by either from Apache, PHP, or any http proxies, whichever is capable in sending response headers will be able to implement this mechanism.
https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
There are couple ways sending CORS headers to your app. One option is to include a middleware that emits CORS headers to every requests. This class ensured your server allow everyone to make request to this server (not very recommended, tweak as you like).
Create new file 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;
}
}
If you are using Lumen, include the middleware in your app.php:
$app->middleware([
//...
App\Http\Middleware\CorsMiddleware::class,
//...
]);
CORS Middleware source code: https://gist.github.com/danharper/06d2386f0b826b669552#gistcomment-1694593