解决方案1：将post传递的参数直接以get的请求参数那样使用&进行拼接
- 说明：
- 把headers去掉也可以，在google浏览器下亲测可用
- url: 为IdentityServer 4的获取token路径（以下AuthID4是使用proxy跨域代理）
- js：为IdentityServer 4的客户端id
- jss：为IdentityServer 4的客户端秘钥
- grant_type：密码模式（前提IdentityServer是配置密码模式）
- username&password：IdentityServer 4设定的账户与密码
- 参考代码如下
axios({
url: '/AuthID4/connect/token',
method: 'post',
data: "client_id=js&client_secret=jss&grant_type=password&username=admin&password=123",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then((res) => {
console.log('res');
console.log(res);
}).catch((err) => {
console.log('err');
console.log(err);
});
- 请求成功展示
请求成功展示
使用Vue的Axios请求Token出错原因分析与解决方案2
返回400（Bad Request），请求返回：（error: "invalid_client"）
原因：client_id或client_secret在授权端错误或无法识别返回400（Bad Request），请求返回：(error: "invalid_request")
原因：使用了get请求
使用Axios请求返回错误信息演示
- vue axios请求如下
axios({
url: '/AuthID4/connect/token',
method: 'post',
data: {
client_id: 'js',
client_secret: 'jss',
grant_type: 'password',
username: 'admin',
password: '123'
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then((res) => {
console.log('res');
console.log(res);
}).catch((err) => {
console.log('err');
console.log(err);
});
- 返回错误信息如下
请求失败
- 使用Fiddler监听了一下Postman的请求信息如下
最后一行与axios请求的FormData的类型不一致，这个真的是坑
POST http://192.168.1.109:8044/connect/token HTTP/1.1
Content-Type: application/x-www-form-urlencoded
User-Agent: PostmanRuntime/7.22.0
Accept: */*
Cache-Control: no-cache
Postman-Token: b8c9156e-0896-4907-aaa4-15b29c70ebeb
Host: 192.168.1.109:8044
Accept-Encoding: gzip, deflate, br
Content-Length: 108
Connection: keep-alive
client_id=ClientID_SystemApi&client_secret=Secrets_SystemApi&grant_type=password&username=admin&password=123
解决方案2
- 在vue项目中安装qs模块
yarn add qs -S
- 在需要请求的页面引入qs
import qs from 'qs';
- 修改vue axios请求的代码如下，增加了qs.stringfy(客户端数据)
axios({
url: '/AuthID4/connect/token',
method: 'post',
data: qs.stringify({
client_id: 'js',
client_secret: 'jss',
grant_type: 'password',
username: 'admin',
password: '123'
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then((res) => {
console.log('res');
console.log(res);
}).catch((err) => {
console.log('err');
console.log(err);
});
- 请求成功展示
请求成功展示
