Afrimadoni Dinata
Feb 13 · 2 min read

Background

I am developing an Ionic apps and a Lumen application as REST API. This Lumen deployed in Docker container with port 81 exposed while the Ionic run in chrome browser. The communication between them figured as below:

CORS ERROR

Why it happen?

According to Mozilla developer website, CORS happen when a web application tried to send requests to resource that has a different origin (domain, protocol, and port) than its own origin. In my case, http request was made from same host as target resource (localhost) but different port number.

Solution

If you google “how to fix/allow CORS” then you’ll find some websites tells you to add extra headers to your HTTP response by modifying web server configuration. But there is another way you can do in case you have a very little experience with server configuration or you were unable to reach infra guys to ask their help, fix it with Middleware.

What is Middleware?

Middleware is a mechanism for filtering HTTP request coming to your application so you can easily modify HTTP Request and Response in a very convenient way.

Create The Class

Create a new file CorsMiddleware.php inside directory app\Http\Middleware

'Access-Control-Allow-Origin' => '*'

Register Middleware

In order to make CorsMiddleware class known by Lumen next we have to Register it in app\bootstrap\app.php

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

Afrimadoni Dinata

Written by

enterprise architect. tech enthusiast. coffee addict. http://rumbia.id

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade