Axios call api with GET become OPTIONS

Question

I use axios for calling API (in front-end). I use the method "GET" :

import axios from 'axios';
import querystring from 'querystring';

var url   = "mydomain.local",
    token = "blablabla...blabla";  

var configs = {
    headers: {
        'Authorization': 'Bearer ' + token,
        'Agency': 'demo0'
    }
};

var testapi = axios.create({
        baseURL: 'http://api.' + url
    });

testapi.get( '/relativeUrl', configs
).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

I got a 405 Method Not Allowed. The method is "OPTIONS" but I use the method ".get()". 405 Method Not Allowed. Method OPTIONS

I test call api with postman and I get 200 OK :

postman 200 OK screenshot

Anyone has an idea ?

Answer 1

So the way to solve this npm install qs.

Then:

import qs from 'qs'

function send(params) {
  return axios.post('/api/create/', qs.stringify(params))
}

Answer 2

Like @Shilly says, OPTIONS method is pre-flight on modern browsers when Preflighted requests conditions (MDN) :

In the response header I had Allow:"GET, HEAD, POST, PUT, DELETE". So OPTIONS method is not available and need to configure it on in the server (Apache).

I do the change on apache (/etc/apache2/sites-available/000-default.conf) :

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "*"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

In Request headers I have :

Origin: "null" is a problem. The cause is :

file:// URLs produce a null Origin which can't be authorized via echo-back. Don't trying to perform a CORS request from a file:// URL (see this post for more details)

After put my javascript file on a apache server, the Origin was not null but I need to add NelmioCorsBundle to my Symfony project to allow preflight