Axios使用GET调用api成为OPTIONS

Question

我使用axios来调用API（在前端）。 我使用方法“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);
});

我得到了405方法不允许。方法是“OPTIONS”，但我使用方法“.get（）”。 405 Method Not Allowed. Method OPTIONS

我用邮递员测试呼叫api，我得到200 OK：

postman 200 OK screenshot

有人有想法吗？

Answer 1

就像@Shilly所说，当Preflighted requests conditions (MDN) {/ h2>时，OPTIONS方法在现代浏览器上进行预先飞行

在响应标题中，我有Allow:"GET, HEAD, POST, PUT, DELETE"。 因此OPTIONS方法不可用，需要在服务器（Apache）中配置它。

我在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"

在Request头文件中我有：

原产地：＆＃34; null＆＃34;是个问题。原因是：

  

file：// URL产生一个无法通过授权的原点   回声回。不要尝试从file：// URL（see this post for more details）

执行CORS请求

将我的javascript文件放在apache服务器上后，Origin不是null但是我需要将NelmioCorsBundle添加到我的Symfony项目中以允许预检

Answer 2

所以解决这个问题的方法npm install qs。

然后：

import qs from 'qs'

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