how to fix 'Access to XMLHttpRequest has been blocked by CORS policy' Redirect is not allowed for a preflight request only one route

Fixing 'Access to XMLHttpRequest has been blocked by CORS policy' Errors in Laravel and VueJS Applications

The Cross-Origin Resource Sharing (CORS) error is a common issue when dealing with different origins. It occurs when the browser prevents a web application from making cross-origin requests due to security reasons. This problem often arises during API requests made by a frontend client like Vue.js and Laravel's backend server. In this blog post, we will explore the various methods you can use to fix such errors while ensuring your application remains secure.

Understand CORS

To understand how to address CORS issues in your project, first grasp its basic concepts. Cross-Origin Resource Sharing (CORS) is a mechanism that utilizes the browser and web server to manage cross-origin requests. It ensures that only authorized origins are allowed to access the data on a website. To do so, both the origin domain making the request and the origin domain receiving the response must be set up correctly.

Identify the CORS Problem

Before you start dealing with fixing your specific issue, ensure that you correctly identify the source of the problem. It can arise due to incorrect configuration in Vue.js or Laravel's backend server. To confirm this, inspect your web browser's developer console for any errors related to CORS. You will commonly see an error message similar to "Access to XMLHttpRequest has been blocked by CORS policy: Response to preflight request doesn't pass access control check."

Solution 1: Configure Laravel Application

In your Laravel application, follow these steps: 1. Enable CORS middleware in the Kernel file. 2. Add 'Access-Control-Allow-Origin' header with * value for all origins.

<?php
namespace App\Http\Middleware;

use Closure;

class AddCorsHeaders{
   public function handle($request, Closure $next){
      // Allow from any origin
      header("Access-Control-Allow-Origin: *");
      return $next($request);
   }
}

<?php
namespace App\Http\Middleware;

use Closure;

class AddCorsHeaders{
   public function handle($request, Closure $next){
      // Allow from specific origins only (not recommended)
      header("Access-Control-Allow-Origin: https://example.com");
      return $next($request);
   }
}

<?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)
   {
      // Add headers to each request
      return $next($request)->header('Access-Control-Allow-Origin', '*')
                            ->header('Access-Control-Allow-Headers', 'Content-Type, X-Auth-Token, Origin, Authorization, Accept, Access-Control-Request-Method')
                            ->header('Access-Control-Expose-Headers', 'X-Total-Count, X-Page, Link');
   }
}

Solution 2: Configure Axios in Vue.js Application

In your Vue.js application, add the following code snippet to your main JavaScript file or Vue instance to handle CORS issues:

<template>
<div id="app">
  <div>Hello {{ msg }}!