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]