...

Fixing Blocked by CORS policy [Flutter+Laravel]

In this tutorial, we’ll see the way on fixing blocked CORS policy errors. It is important to solve them before deploying our websites (client/server), otherwise our sites will not work appropriately in many web browsers like Google Chrome, Mozilla, Microsoft Edge, etc

Here, we will cover it for Laravel and Flutter (Flutter + Laravel: Your Guide to Connecting to a Database – Algorithms Blog), but the tutorial can be used for any framework. We will follow the next steps to ensure that our errors are solved:

  • [Client/Flutter] Ensure our client is calling the right endpoint (no redirects)
  • [Server/Laravel] Allow our client to make requests to our server by returning Access-Control-Allow-Origin in the response

Flutter is calling the right endpoint

First, we will copy our full endpoint that gives the error, to know that we will open the Developer tools>Network and we will copy the Requested URL, also we will copy our Origin which is in Referer

Blocked by CORS policy
Fig 1. Blocked by CORS policy

We will call the next curl by setting up our Origin and the Requested path curl -D - -H "Origin: https://mvp.technolympus.com/" "https://mvpbackend.technolympus.com/mvps/?page_size=20&page=1&filter=all&text&userId=-1". If we receive moved permanently, we wil update our .htacess if possible, otherwise, use the Location instead for calling the endpoint. In fact, we have to get the Response HTTP/1.1 200 OK to continue with the next steps

curl  -D - -H "Origin: https://mvp.technolympus.com/" "https://mvpbackend.technolympus.com/mvps/?page_size=20&page=1&filter=all&text&userId=-1"

Response:
HTTP/1.1 301 Moved Permanently
Date: Sun, 12 Oct 2025 18:03:47 GMT
Content-Type: text/html
Content-Length: 795
Connection: keep-alive
Location: https://mvpbackend.technolympus.com/mvps?page_size=20&page=1&filter=all&text&userId=-1
platform: hostinger
panel: hpanel
Content-Security-Policy: upgrade-insecure-requests
Age: 578
Server: hcdn
alt-svc: h3=":443"; ma=86400
x-hcdn-request-id: be6a27ecd5a4d30275b3c441da047b96-phx-edge5
x-hcdn-cache-status: HIT
...

To solve this, when you can modify the backend server, we will update it to point to the correct URL. If you have Hostinger, you can do this by updating the path for the domain/subdomain to point correctly to the public Laravel folder without redirects. You can update your .htaccess to avoid the redirect when the / exists

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Handle X-XSRF-Token Header
    RewriteCond %{HTTP:x-xsrf-token} .
    RewriteRule .* - [E=HTTP_X_XSRF_TOKEN:%{HTTP:X-XSRF-Token}]

    # Redirect Trailing Slashes If Not A Folder... Comment this
    #RewriteCond %{REQUEST_FILENAME} !-d
   # RewriteCond %{REQUEST_URI} (.+)/$
   # RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Now, test the configuration with different paths and ensure all return 200

curl -I "https://mvpbackend.technolympus.com/mvps/"
curl -I "https://mvpbackend.technolympus.com/mvps"
curl -I "https://mvpbackend.technolympus.com/mvps/?page_size=20&amp;page=1&amp;filter=all&amp;text&amp;userId=-1"
curl -I "https://mvpbackend.technolympus.com/mvps?page_size=20&amp;page=1&amp;filter=all&amp;text&amp;userId=-1"

Access-Control-Allow-Origin for Laravel

If you do not have Laravel, you can add the next to your index.php

header("Access-Control-Allow-Origin: *"); //Specify here your allowed origins
// Optional: Allow specific HTTP methods
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
// Optional: Allow specific headers
header("Access-Control-Allow-Headers: Content-Type, Authorization");

To allow requests for external sites in our Laravel application, we will follow the steps below for specific Laravel versions. You can know your Laravel version by looking at the composer.json

Laravel version
Fig 2. Laravel version

For Laravel >12:

  • Run php artisan config:publish cors

Add your corresponding sites in allowed_origins, and customize the next file for your systems:

<?php

return [

    'paths' => ['*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],

    'allowed_origins' => ['https://mvp.technolympus.com'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['Content-Type', 'X-Requested-With', 'Authorization'],

    'exposed_headers' => [],

    'max_age' => 3600,

    'supports_credentials' => false, 

];

For other versions

  • composer require fruitcake/laravel-cors
  • php artisan vendor:publish –tag=”cors”, update the config.cors file same as the above
  • In app/Http/Kernel.php, register the middleware
protected $middleware = [
    // ...
    \Fruitcake\Cors\HandleCors::class,
];

To verify, query again the curl command and ensure that the Access-Control-Allow-Origin flag is set; this may vary according to your settings

curl -I "https://mvpbackend.technolympus.com/mvps/"
HTTP/1.1 200 OK
Date: Sun, 12 Oct 2025 21:03:06 GMT
Content-Type: application/json
Connection: keep-alive
Vary: Accept-Encoding
X-Powered-By: PHP/8.4.3
Cache-Control: no-cache, private
Access-Control-Allow-Origin: *
...

Causes of common errors

  • Error in Flutter: Access to fetch at ‘https://mvpbackend.technolympus.com/mvps/?page_size=20&page=1&filter=all&text&userId=-1’ from origin ‘https://mvp.technolympus.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.
    • Validation: curl -D - -H "Origin: https://mvp.technolympus.com/" "https://mvpbackend.technolympus.com/mvps/?page_size=20&page=1&filter=all&text&userId=-1"
    • Solution: Ensure the curl command returns Response HTTP/1.1 200 OK, see solution in the above steps

Clear and validate

Finally, do not forget to clear your browser history. You can select the advanced options and select all, ensuring you delete all the data for the time you had the issue. For example, if your issue started 1 day ago, delete the cache from one day ago, or use the Private version of your web browser.

Clear cache
Fig 3. Clear cache

Finally, access your website and see that the error has disappeared

Validation Fixing Blocked by CORS policy
Fig 4: Validation Fixing Blocked by CORS policy

Happy coding 🙂 !

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.