as been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource vuejs code example

Example 1: Angular Laravel has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

namespace App\Http\Middleware;
use Closure;
class Cors
{
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, DELETE');
        $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
        $response->header('Access-Control-Allow-Origin', '*');
        return $response;
    }
}

Example 2: Access to XMLHttpRequest at 'http://localhost/MySQL_pracs/InsertUser.php' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

//Access to XMLHttpRequest at 'http://localhost/[api path].php' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

//The error is simply saying that "Content-Type" is missing from "Access-Control-Allow-Headers".

//Therefore we need to add "Content-Type" to "Access-Control-Allow-Headers".

<?php 
header('Access-Control-Allow-Headers: Content-Type');
-----
?>