CORS (Access-Control-Allow-Origin) on Laravel

Question

I created an application in AngularJS and I'm trying to make calls to the Laravel API:

• MyApp (AngularJS): http://localhost:8080/
• API (Laravel Boilerplate): http://localhost:8000/

I use Laravel API Boilerplate (JWT Edition) to API.

But I get this error in the browser console:

XMLHttpRequest cannot load http://localhost:8000/api/auth/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

I tried to apply the cors middleware (barryvdh/laravel-cors) in api_routes.php but the error remains.

api_routes.php:

<?php

$api = app('Dingo\Api\Routing\Router');

$api->version('v1', ['middleware' => 'cors'], function ($api) {

    $api->post('auth/login', 'App\Api\V1\Controllers\AuthController@login');
    $api->post('auth/signup', 'App\Api\V1\Controllers\AuthController@signup');
    $api->post('auth/recovery', 'App\Api\V1\Controllers\AuthController@recovery');
    $api->post('auth/reset', 'App\Api\V1\Controllers\AuthController@reset');

    // example of protected route
    $api->get('protected', ['middleware' => ['api.auth'], function () {     
        return \App\User::all();
    }]);

    // example of free route
    $api->get('free', function() {
        return \App\User::all();
    });

});

Answer 1

I'm completely wrong about this implementation. The origin header has a specific placement case in Laravel, where other headers can be defined in Middleware, the origin header cannot.

Instead, you need to add this to the top of your main routes.php file:

header('Access-Control-Allow-Origin: http://localhost:8080');

Answer 2

I don't fully understand this, but when i want cross browser access i add a .htaccess file into the folder where my endpoint is with the following in it:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Answer 3

you should add an nginx virtual host pointing to your api with a proxy pass. essentially you need to make sure both your front and backend are fed from the same domain

Answer 4

You can create Cors middleware class and add into the application's global HTTP middleware stack in kenel.php. Middlewares in this stack will run during every request to your application.

Try this.

Answer 5

Mostly CORS issues are server related, if it is not getting solved by .htaccess, same headers u can give from application starter file. so have understanding of domain name, where is pointed to folder path of application. In Laravel index.php is starter file so use the following lines of code and add in starting lines.

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: *");

cache clear in browser needed for loading web-app

Answer 6

Add this on top of routes.php file or api.php file depending on where you have placed your routes:

header('Access-Control-Allow-Origin: http://localhost:8080');
header('Access-Control-Allow-Headers: origin, x-requested-with, content-type');
header('Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS');

Adding these 3 lines in the site where you are making the request to, solves the CORS problem. The above will allow JS running on http://localhost:8080 to make request to the backend which contains the above lines.

The answer is inspired from @Dallas Caley's answer.