axios调用api用GET变成OPTIONS

Posted

技术标签:

【中文标题】axios调用api用GET变成OPTIONS【英文标题】:Axios call api with GET become OPTIONS 【发布时间】:2017-06-27 12:01:53 【问题描述】:

我使用 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 Method Not Allowed。方法是“OPTIONS”,但我使用方法“.get()”。 405 Method Not Allowed. Method OPTIONS

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

postman 200 OK screenshot

有人有想法吗?

【问题讨论】:

OPTIONS 是一个飞行前请求,用于检查您 GET/POST 来自的服务器是否允许您进行 GET/POST。可能是服务器上的某些配置设置阻止了您的 GET。 在响应头中,我得到了 Access-Control-Allow-Origin:"*" 和 Allow:"GET, HEAD, POST, PUT, DELETE" 所以我认为 GET 方法是可用的。跨度> 也许尝试将 Access-Control-Allow-Origin:" * " 更改为实际来源。并非所有浏览器都允许 ACAO="*"。但这通常会产生不同的错误,所以不确定。对不起,出于其他想法。 感谢您的回答。 ACAO="*" 正在为:testapi.post( '/login_check', querystring.stringify( _username: 'adherent0', _password: 'adherent0' ) 工作,所以我认为这不是问题所在。我认为:var configs = headers: 'Authorization': 'Bearer ' + token, 'Agency': 'demo0' ; 是问题,但我不知道我做错了什么 【参考方案1】:

就像@Shilly 所说,当Preflighted requests conditions (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"

在请求标头中我有:

Origin: "null" 是个问题。原因是:

file:// URLs 产生一个空的 Origin 不能通过授权 回声。不要尝试从 file:// URL (see this post for more details) 执行 CORS 请求

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

【讨论】:

【参考方案2】:

那么解决这个问题的方法npm install qs

然后:

import qs from 'qs'

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

【讨论】:

以上是关于axios调用api用GET变成OPTIONS的主要内容,如果未能解决你的问题,请参考以下文章

调用 axios.get() 时无法获取 /[object%20Object]

从 Axios API 返回数据

Nativescript Axios 调用 Web API

如何在满足条件之前“循环”Axios GET 调用?

如何从我得到的数组中获取特定的数组元素作为调用 axios.get() 调用的函数的响应 [重复]

Axios学习