CORS Issue with external API - Works via PostMan but not HTTP request with Axios

Question

Working on a new Laravel project that involves car data and found a free look up API.

http://www.carqueryapi.com/documentation/api-usage/

An example endpoint is:

https://www.carqueryapi.com/api/0.3/?callback=?&cmd=getMakes

This works fine on PostMan with a normal GET request.

However in Vue.js using Axios:

getAllMakes: function() {
    axios.get("https://www.carqueryapi.com/api/0.3/?callback=?&cmd=getMakes").then(function(response) {
        console.log(response);
    });
}

I get a CORS issue:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there anything I can do? Or some the API is blocking?

You need to set the Access-Control-Allow-Origin header. Check out this link for more info, header info at the bottom of this page: http://codeheaven.io/how-to-use-axios-as-your-http-client/ — NickyTheWrench, Feb 26 '17 at 21:24
Cors issues is ur browser protecting you, that's why it doesn't fail in Postman bc they ignore it. The solution is that you need to set the proper headers in your Laravel API. There are a few approaches to this, so see http://stackoverflow.com/questions/33076705/laravel-5-1-api-enable-cors — tam5, Feb 27 '17 at 11:31
@tam5: He is using Vue not Laravel in his sample code. Personally I think you should fetch the API Data on server side and not on client side for security reasons. maybe this demo api doesn't need credentials but I believe that later if you want to get real data you will need to authenticate against api. and then the question is: do you want to give the user control over the authentication credentials? If not fetch the data on backen side and then fetch it from there in your vue component. — kSp, Jun 27 '19 at 21:54

score 2 · Answer 1 · edited Jun 15 '20 at 00:05

You can fix this error using this

    return axios(url, {
      method: 'GET',
      mode: 'no-cors',
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
      },
     credentials: 'same-origin',
    }).then(response => {
      console.log(response);
    })

In your API please add a cors Middleware

  <?php
 namespace App\Http\Middleware;

 use Closure;

class CORS {

/**
 * Handle an incoming request.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  \Closure  $next
 * @return mixed
 */
public function handle($request, Closure $next)
{

    header("Access-Control-Allow-Origin: *");

    // ALLOW OPTIONS METHOD
    $headers = [
        'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
    ];
    if($request->getMethod() == "OPTIONS") {
        // The client-side application can set only headers allowed in Access-Control-Allow-Headers
        return Response::make('OK', 200, $headers);
    }

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

}

Add Middleware in app\Http\Kernel.php

 protected $routeMiddleware = [
    'cors' => 'App\Http\Middleware\CORS',
];

Then you can use this in routes

Route::get('/', function () {`enter code here`
})->middleware('cors');

CORS Issue with external API - Works via PostMan but not HTTP request with Axios

1 Answers1

Linked