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方法不允许.方法选项

我用邮递员测试呼叫api,我得到200 OK:

邮差200 OK截图

有人有想法吗？

Answer 1

就像@Shilly所说,当Preflighted请求条件(MDN)时,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"

在请求标头我有:

来源:"null"是个问题.原因是:

file:// URL产生一个null,无法通过echo-back授权.不要尝试从file:// URL执行CORS请求(有关详细信息,请参阅此帖子)

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