Lumen with CORS and OPTIONS requests

CatchAllOptionsRequestsProvider.php

<?php namespace App\Providers;

use Illuminate\Support\ServiceProvider;

/**
 * If the incoming request is an OPTIONS request
 * we will register a handler for the requested route
 */
class CatchAllOptionsRequestsProvider extends ServiceProvider {

  public function register()
  {
    $request = app('request');

    if ($request->isMethod('OPTIONS'))
    {
      app()->options($request->path(), function() { return response('', 200); });
    }
  }

}

CorsMiddleware.php

<?php namespace App\Http\Middleware;

class CorsMiddleware {

  public function handle($request, \Closure $next)
  {
    $response = $next($request);

    $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE');
    $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
    $response->header('Access-Control-Allow-Origin', '*');

    return $response;
  }

}

usage.md

Register the CatchAllOptionsRequestsProvider service provider in bootstrap/app.php which will check the incoming request and response successfully if it is an OPTIONS request.

Add the CorsMiddleware to the $app->middleware([ array in bootstrap/app.php which will attach the following CORS headers to all responses:

• allow all headers
• allow requests from all origins
• allow all the headers which were provided in the request

Thanks for this. I think it's a brilliant idea to use a service provider to interrupt the OPTIONS requests.

You're a legend man. Been thinking it was a better idea to go with one of the packages that are out there, unfortunately the ones that are for laravel don't work for lumen and the lumen ones just don't seem to function properly based on all the OPTIONS stuff.

This is simple and sweet. Huge applaud to you! You should chuck it in a composer package, it would definitely rate well. Maybe just add the allowed methods/headers into the .env.

Dude, I've been search for this on the last two days.

My client build with Angular and always have an prefligh request with OPTIONS method. After 2 days with no result in Angular side, then I think, perhaps its on the Lumen side, then I found your solution and now its work.

Thanks a lot.

Hi Sir !

Thanks a lot for your solution, my friend and I had some CORS problem with our angular application and OPTIONS method. We tried with your code and it works like a charm !

Thanks for this solving

The best solution I have found thus far!

Lord!!!!! I have to comment.... This is the best solution, BEST!! BEST!! BEST!!... really saved me a lot.
Thanks sooo sooo much :: #iBow

Killer! Thanks!

Thanks!

Thank you very much!

Thanks \o/

@danharper

This worked on my local machine with two different vhost config. But when I uploaded the updates on live servers headers were not set on the second xhr.

1st response

Access-Control-Allow-Credentials:*
Access-Control-Allow-Headers:accept, content-type, x-csrf-token
Access-Control-Allow-Methods:*
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Cache-Control:max-age=0
Connection:keep-alive, Keep-Alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Mon, 19 Oct 2015 01:02:52 GMT
Expires:Mon, 19 Oct 2015 01:02:52 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.10 (Debian)
Transfer-Encoding:chunked
Vary:Accept-Encoding

2nd response header

Cache-Control:no-cache, private
Connection:keep-alive, close
Content-Type:text/html; charset=UTF-8
Date:Mon, 19 Oct 2015 01:02:52 GMT
Server:Apache/2.4.10 (Debian)
Transfer-Encoding:chunked

Any ideas why is this not working on different servers?

Thanks, I had two hours with this problem.

You are a God. tks

👍 thanks

Thanks a lot for this lovely snippet

I don't understand why you're dividing code over 2 files when all of this can be handled in the single middleware, with no need for a provider?

<?php namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    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;
    }
}

Amazing!! 😊

Can anyone explain why we have the separate provider for catching OPTIONS requests? Why not include them with the other request types in 'Access-Control-Allow-Methods' in our middleware?

Basically I'm trying to figure out why we're treating options differently. As doing so seems to break preflight requests when you make calls via Chrome.

@imjohnbon from my understanding it is because lumen does not allow OPTIONS method and will return status response 405 MethodNotAllowed unless you explicitly add it your routes $app->options('my-route', function(){}), that is why the request do not hit the middleware. in my case this was happening using react and I was stuck for almost one hour trying to figure out what was wrong, until I found this and everything make sense.

But this service provider was not working without adding extra headers apparently the preflight request need this headers in response as well:

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Headers: Content-Type, Origin

Otherwise I would the following errors:

• Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'my-host' is therefore not allowed access.
• Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response

But Following this amazing CORS tutorial: http://www.html5rocks.com/en/tutorials/cors/

Heres the ServiceProvider.php with the changes

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        $request = app('request');

        // ALLOW OPTIONS METHOD
        if($request->getMethod() === 'OPTIONS')  {
            app()->options($request->path(), function () {
                return response('OK',200)
                    ->header('Access-Control-Allow-Origin', '*')
                    ->header('Access-Control-Allow-Methods','OPTIONS, GET, POST, PUT, DELETE')
                    ->header('Access-Control-Allow-Headers', 'Content-Type, Origin');                    
            });
        }
    }
}

And here is the middleware

<?php

namespace App\Http\Middleware;

use Closure;

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

        $response->header('Access-Control-Allow-Origin','*');

        return $response;
    }
}

Awesome, this solved my problem. Thanks!

sorry , may I ask how to use two files in app.php, I don't know how to register these in bootstrap/app.php

You don't have to use a service provider as long as you configured the middleware as a global middleware rather than
a route middleware.

Perfect!

Thanks brother. Finally the API I'm developing in Lumen I can consume externally with Vue.js. The error that had me on the edge I could solve the madness . Greetings from Venezuela.

I had to use

$response->headers->set($key, $value);

Perfect solution, you are genius!

Awesome! Thank you so much.

Thank you so much. Saved my life.

it helped me. thank you!

After implementing this, I was still having the "405 Method Not Allowed" error. Just because I didn't implement the 'options' method in my routes file (routes/web.php)...

So adding this method with an empty Closure did the trick:

$app->options('/path/with/allowed/options', function () {
    //
});

Also, by using regex in this route, it is possible to make this work for all URi (don't know if that's recommanded though... please yell if not):

$app->options('{path:.+}', function () {
    //
});

I've been having the same issues as all of you with Lumen 5.4. It seems to have been caused by a recent change in the ServiceProviders code (see laravel/lumen-framework#568)

For it to work, you now have to intercept the OPTIONS requests directly into the CorsMiddleware, and not in a Service Provider.

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
		//Intercepts OPTIONS requests
		if($request->isMethod('OPTIONS')) {
			$response = response('', 200);
		} else {
			// Pass the request to the next middleware
			$response = $next($request);
		}

		// Adds headers to the response
		$response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE');
		$response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
		$response->header('Access-Control-Allow-Origin', '*');

		// Sends it
		return $response;
	}
}

There's no need to add any route (as @herveguetin suggested) since all the interception is done in a middleware.

I registered this middleware as global, but I think it will work on a route basis too.

Thanks man, this works great!

I was still having problems, and found that you have to Enable Headers and CORS in Apache

Thank you so much.

@rgehan solutions works perfectly adding a Middleware. Im Working Lumen 5.4 in vhost (custom domain) and consuming via Angular4 (locahost)

===
UPDATE > @rgehan your solution doesn't work on anonymous function - download method

    $app->get('images/covers/{image}', function($image = null){
        $path = storage_path().'/app/covers/';
        if(file_exists($path . $image)){
            return response()->download($path . $image);
        }
    });

Thanks @rgehan. This modification works well

Thanks @rgehan. You save my life.

Thank you mate!

I had to change my response headers a little to make it works on here. The allowed headers now looks like this
'Access-Control-Allow-Headers' => 'access-control-allow-origin,authorization,content-type'

Thank you so much this really helped me out!
Don't know if anyone had to do the same thing, but I had to do

$app->options('/card', ['middleware' => 'cors', '']);

$app->post('/card', ['middleware' => 'cors', 'uses' => 'CardController@createCard']);

to make it work maybe I missing a step.

hi thanks

It worked for me.

hi vamidi you need to register the middleware in bootstrap/app.php inside the app->middleware.

this is explained in top post.

hi I worked me for get request but for post request it is not working for me.

hi,

if you are using the IIS server by chance you set the HTTP request headers as below

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: 'HEAD, GET, POST, PUT, PATCH, DELETE'
Access-Control-Allow-Headers: 'Origin, Content-Type, X-Auth-Token';

then everything works fine.

and now POST 404 not found

Thank you.

Thanks @rgehan. You save my life.
@danharper try to update your solution with the @rgehan given

Thanks @danharper.

I'm still concerned about the usage of Service Provider, isn't it meant to be used for registering things instead of handling things?

Cors middleware is working but catchalloptionsprovider is not working and throwing the following error..Somebody,

please help me!!

Wow...Finally... Thanks a lot

It works. Thanks
So This is the perfect solution for me

1. Create CatchAllOptionsRequestsProvider.php to App\Providers folder.

<?php namespace App\Providers;
use Illuminate\Support\ServiceProvider;
/**
 * If the incoming request is an OPTIONS request
 * we will register a handler for the requested route
 */
class CatchAllOptionsRequestsProvider extends ServiceProvider {
  public function register()
  {
    $request = app('request');
    if ($request->isMethod('OPTIONS'))
    {
      app()->options($request->path(), function() { return response('', 200); });
    }
  }
}

2. Then create CorsMiddleware.php

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
		//Intercepts OPTIONS requests
		if($request->isMethod('OPTIONS')) {
			$response = response('', 200);
		} else {
			// Pass the request to the next middleware
			$response = $next($request);
		}

		// Adds headers to the response
		$response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE');
		$response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
		$response->header('Access-Control-Allow-Origin', '*');

		// Sends it
		return $response;
	}
}

3. In bootstrap/app.php
   add this

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

$app->register(App\Providers\CatchAllOptionsRequestsProvider::class);

Thanks to @danharper and @rgehan

Thanks a lot mate.. 👍

thanks @davidnknight @rgehan

You're right, all of this Middleware logic can be placed just in the middleware file and not also in a ServiceProvider.

ref:

https://gist.github.com/danharper/06d2386f0b826b669552#gistcomment-1694593

https://gist.github.com/danharper/06d2386f0b826b669552#gistcomment-2013919

Thanks for summing it up @nusendra

my pleasure bud @choyan

Works for me. Many Thanks. :)

Thanks very much for this

Could you please explain how this solution can possibly be correct? My understanding is that OPTIONS exists in the HTTP standard for a reason. Carelessly stubbing it to a no-op must eventually have Dire Consequences, right?

My solution was creating CorsMiddleware as below:

<?php

/**
 * Location: /app/Http/Middleware
 */
namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
	/**
	 * Handle an incoming request.
	 *
	 * @param  \Illuminate\Http\Request  $request
	 * @param  \Closure  $next
	 * @return mixed
	 */
	public function handle($request, Closure $next)
	{
		$headers = [
			'Access-Control-Allow-Origin' => '*',
			'Access-Control-Allow-Methods' => 'POST,GET,PATCH,PUT,DELETE,OPTIONS',
			'Access-Control-Max-Age' => '86400',
                        'Access-Control-Allow-Headers' => 'Content-Type,API-KEY'
                ];

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

		$response = $next($request);

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

		return $response;
	}
}

Then register the middleware with a name in bootstrap/app.php as below:

$app->routeMiddleware([
  'cors' => App\Http\Middleware\CorsMiddleware::class
]);

Then wrapping required routes between the defined middleware in routes/web.php as below, and adding an additional rule to handle preflight OPTIONS requests:

$router->group(['middleware' => 'cors'], function () use ($router) {
  //All the routes you want to allow CORS for

  $router->options('/{any:.*}', function (Request $req) {
    return;
  });
});

NOTE
Using Chrome, you can get a more detailed error message than Firefox, which will help you to fix the problem and exactly states why there is no Access-Control-Allow-Origin in the response header. Also, keep in mind that any kind of redirect is not allowed in the preflight request, so make sure you don't have such rule in your .htaccess or any other place.

My solution was creating CorsMiddleware as below:

<?php

/**
 * Location: /app/Http/Middleware
 */
namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
	/**
	 * Handle an incoming request.
	 *
	 * @param  \Illuminate\Http\Request  $request
	 * @param  \Closure  $next
	 * @return mixed
	 */
	public function handle($request, Closure $next)
	{
		$headers = [
			'Access-Control-Allow-Origin' => '*',
			'Access-Control-Allow-Methods' => 'POST,GET,PATCH,PUT,DELETE,OPTIONS',
			'Access-Control-Max-Age' => '86400',
                        'Access-Control-Allow-Headers' => 'Content-Type,API-KEY'
                ];

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

		$response = $next($request);

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

		return $response;
	}
}

Then register the middleware with a name in bootstrap/app.php as below:

$app->routeMiddleware([
  'cors' => App\Http\Middleware\CorsMiddleware::class
]);

Then wrapping required routes between the defined middleware in routes/web.php as below, and adding an additional rule to handle preflight OPTIONS requests:

$router->group(['middleware' => 'cors'], function () use ($router) {
  //All the routes you want to allow CORS for

  $router->options('/{any:.*}', function (Request $req) {
    return;
  });
});

NOTE
Using Chrome, you can get a more detailed error message than Firefox, which will help you to fix the problem and exactly states why there is no Access-Control-Allow-Origin in the response header. Also, keep in mind that any kind of redirect is not allowed in the preflight request, so make sure you don't have such rule in your .htaccess or any other place.

I've tried all of the code, and LOL, no one work for me.

I'm still got this error