Request header field X-Requested-With is not allowed

I recently work with this simple API, google geocode using Laravel and Axios for API request, but I got this error:

Failed to load https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyB7f2W17hqG9yIQWEcuifem35yK5GOIL08: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

I got this in my XHR

Request URL:https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyASQCfY2r2PxAwS24xhdC7pBuG23WYX6kU
Request Method:OPTIONS
Status Code:200 
Remote Address:74.125.68.95:443
Referrer Policy:no-referrer-when-downgrade
Response Headers
access-control-allow-origin:*
alt-svc:hq=":443"; ma=2592000; quic=51303431; quic=51303339; quic=51303338; quic=51303337; quic=51303335,quic=":443"; ma=2592000; v="41,39,38,37,35"
cache-control:public, max-age=86400
content-encoding:gzip
content-length:592
content-type:application/json; charset=UTF-8
date:Mon, 18 Dec 2017 05:42:31 GMT
expires:Tue, 19 Dec 2017 05:42:31 GMT
server:mafe
status:200
vary:Accept-Language
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block
Request Headers
:authority:maps.googleapis.com
:method:OPTIONS
:path:/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyASQCfY2r2PxAwS24xhdC7pBuG23WYX6kU
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, br
accept-language:en,id;q=0.9,en-US;q=0.8
access-control-request-headers:x-csrf-token,x-requested-with
access-control-request-method:GET
origin:https://dikbudtomohon.dev
user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
x-chrome-uma-enabled:1
x-client-data:CJG2yQEIpbbJAQjBtskBCPqcygEIqZ3KAQj/nsoBCKijygE=
Query String Parameters
view source
view URL encoded
address:1600 Amphitheatre Parkway, Mountain View, CA

This is my code:

    <script>
        geocode();
        function geocode() {
        axios.get('https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyB7f2W17hqG9yIQWEcuifem35yK5GOIL08', {})
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
        }
    </script>

Please help me...

bobbybouwmann

8 years ago

Best Answer

Level 88

I believe you need to add some config to make this work. First of all you have to tell the API that expect JSON and that you also send the correct type of request.

axios.get(
    'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyB7f2W17hqG9yIQWEcuifem35yK5GOIL08', 
    {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        },
        responseType: 'json',
        withCredentials: true,
    }
).then(function () {

}).catch(function () {

});

You should probably set these headers and config when you create the axios object, like the documentations shows. I think this works as well ;)

1 like

victormongi

8 years ago

Level 2

Hi @bobbybouwmann thank you for the reply...

code above produce this error:

Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'https://dikbudtomohon.dev' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

and anyway I have this in my cors.php:

    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,

I pulled package "barryvdh/laravel-cors": "^0.10.0", What is wrong with my code?

bobbybouwmann

8 years ago

Level 88

You do a request to the google maps API. The allowedOrigins on your server are not used here!

victormongi

8 years ago

Level 2

Hi @bobbybouwmann please help me what should I do?How to set allowedOrigins on my server? I added this:

    'supportsCredentials' => false,
    'allowedOrigins' => ['https://dikbudtomohon.dev'],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [''],
    'maxAge' => 0,

but still not working...

victormongi

8 years ago

Level 2

Somehow Solved: add this:


window.axios.defaults.headers.common = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
};

But I have to turn of CSRF token... Any idea @bobbybouwmann

bobbybouwmann

8 years ago

Level 88

You can turn of CSRF-token for API's if you wish in your Kernel.php file. This is recommended way, since you already use an API which does not allow for POST interaction from other origins by default.

However if you really want this you can simply pass the token to axios using a header:

// In the head section of your <!DOCTYPE>

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

// In your axios config file
window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
};

Please or to participate in this conversation.