Blocked cross origin request -> missing x-csrf-token

I want to fill a select with countries. To do that i call the api https://restcountries.eu/rest/v2/all?fields=name

I get the following error -> Cross Origin request blocked: The same source-rule forbids reading the external ressource https://restcountries.eu/rest/v2/all?fields=name. (Reason: missing token 'x-csrf-token' in CORS-Heder 'Access-Control-Allow-Headers' from CORS-Preflight-Channel)

I did the following

Included the csrf-token in a meta tag in the head

<meta name="csrf-token" content="{{ csrf_token() }}">

Included the cors middleware from https://github.com/barryvdh/laravel-cors

This is what my script looks like

$(document).ready(function () {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: 'get',
        url: 'https://restcountries.eu/rest/v2/all?fields=name',
        success: function (result)
        {
            
        },
        error:function()
        {
            console.log("something went wrong");
        }
    });
});

bobbybouwmann

8 years ago

Level 88

Your code looks correct to me. So two questions for you:

Are you sure $('meta[name="csrf-token"]').attr('content') is returning the correct token?
Have you tried passing the headers to the ajax request alone and check if that works?

You can see in your browser console if the header was send with the request or not! That might be a good starting point to look where this is going wrong

bobbybouwmann

8 years ago

Level 88

This might help as well: https://stackoverflow.com/questions/7686827/how-can-i-add-a-custom-http-header-to-ajax-request-with-js-or-jquery

NielsNumbers

7 years ago

Level 10

The error message is telling you that the API that you are using in not allowing X-CSRF-TOKEN. You should only set the X-CSRF-TOKEN when you call an intern url from your laravel application.

Just change your code to:

$(document).ready(function () {
    $.ajax({
        type: 'get',
        url: 'https://restcountries.eu/rest/v2/all?fields=name',
        success: function (result)
        {
            
        },
        error:function()
        {
            console.log("something went wrong");
        }
    });
});

If you have set the header in a different .js file with $.ajaxSetting you may remove it using

delete $.ajaxSettings.headers["X-CSRF-TOKEN"];

just before your ajax call.

Please or to participate in this conversation.