Axios 调用 api 与 GET 成为 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) 时，OPTIONS 方法在现代浏览器上是 pre-flight :

在回复中 header 我有 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"

在请求中 headers 我有：

来源："null" 是个问题。原因是：

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)

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

Answer 2

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

然后：

import qs from 'qs'

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

Axios 调用 api 与 GET 成为 OPTIONS

Axios call api with GET become OPTIONS

javascript

symfony

cors

axios

preflight

就像@Shilly 说的那样，当 Preflighted requests conditions (MDN) 时，OPTIONS 方法在现代浏览器上是 pre-flight :

来源："null" 是个问题。原因是：

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