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 'https://musicbrainz.org/ws/2/release-group/?xxxxxxx' 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.

code

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

$.ajax({
    type: "GET",
    url: "https://musicbrainz.org/ws/2/release-group/?query=artist:%22" + $artist_encoded + "%22%20AND%20releasegroup:%22" + $album_encoded + "%22",
    dataType: "xml",
    success: myfunction
});

Answers:

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:

<?php

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)
            ->header('Access-Control-Allow-Origin','*')
            ->header('Access-Control-Allow-Methods','*')
            ->header('Access-Control-Allow-Headers','*')
        ;
    }
}

and register the new middleware in kernel.php:
in middleware array add:
protected $middleware = [
        AppHttpMiddlewareCors::class,
    ];

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:
->header('Access-Control-Allow-Origin','*')
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 ['127.0.0.1:8000']

Method 2

// i hope it help you 
$.ajax({
  url: "https://musicbrainz.org/ws/2/place/478558f9-a951-4067-ad91-e83f6ba63e74?inc=aliases",
    headers: {
            'Content-Type':'text/xml',
        }, 
  dataType: "text",
  success: function(text) {
 console.log(text)
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


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

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x