6

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 ?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
riwanab
  • 245
  • 2
  • 4
  • 10
  • 1
    OPTIONS is a pre-flight request that checks if the server you GET/POST from, allows you to GET/POST at all. It's probably some config setting on the server that's blocking your GET. – Shilly Feb 09 '17 at 13:01
  • In the Response headers, I got Access-Control-Allow-Origin:"*" and Allow:"GET, HEAD, POST, PUT, DELETE" so I think GET method is available. – riwanab Feb 09 '17 at 13:08
  • 1
    Maybe try changing the Access-Control-Allow-Origin:" * " to the actual origin. Not all browsers allow ACAO="*". But that would normally create a different error, so not sure. I'm sorry, out of other ideas. – Shilly Feb 09 '17 at 13:12
  • Thanks for your answers. ACAO="*" is working for : `testapi.post( '/login_check', querystring.stringify({ _username: 'adherent0', _password: 'adherent0' })` so I don't think this is the problem. I think : `var configs = { headers: { 'Authorization': 'Bearer ' + token, 'Agency': 'demo0' } };` is the problem but I don't know what I doing wrong – riwanab Feb 09 '17 at 13:53

2 Answers2

9

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 :

enter image description here

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

Community
  • 1
  • 1
riwanab
  • 245
  • 2
  • 4
  • 10
0

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))
}
Abdullah
  • 2,015
  • 2
  • 20
  • 29
Gal Bracha
  • 19,004
  • 11
  • 72
  • 86