Cors header error with ajax request request

I am trying to make a ajax request to the musicbrainz api but keep getting a cors header error.

the error : Access to XMLHttpRequest at '' from origin 'https://my_url' has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.


var $artist_encoded = encodeURIComponent($artist);
var $album_encoded = encodeURIComponent($album);

    type: "GET",
    url: "" + $artist_encoded + "%22%20AND%20releasegroup:%22" + $album_encoded + "%22",
    dataType: "xml",
    success: myfunction


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading of resources. So you must add permission to client side(ajax request) to receive response from server side.

You can handle this issue by creating a new middleware:


namespace AppHttpMiddleware;

use Closure;

class Cors
     * Handle an incoming request.
     * @param  IlluminateHttpRequest  $request
     * @param  Closure  $next
     * @return mixed
    // Cors middleware for allow api access from client side 'vue project' 
    public function handle($request, Closure $next)
        return $next($request)

and register the new middleware in kernel.php:
in middleware array add:
protected $middleware = [

in route middleware array add:
protected $routeMiddleware = ['cors' => AppHttpMiddlewareCors::class,

Finally implement this middleware into routes:
Route::group(['middleware' => ['cors']], function () {
//... your routes

As a result when adding:
it means that you allow any other origin to access your app. You could just add an array of specific routes which you want to access your app. In your case I think it’s ['']

Method 2

// i hope it help you 
  url: "",
    headers: {
  dataType: "text",
  success: function(text) {
<script src=""></script>

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x