版权声明:本文为博主原创文章,允许转载,但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/88345841
已解决CORS跨域时axios无法获取服务器自定义的header信息?!
先看代码:
// 登录后的表单提交
ajaxRegisterApi: function (form) {
var key = localStorage.getItem("token");
console.log("key=" + key)
var that=this.form; // 放置指针,便于then操作的获取
var localPath = 'http://192.168.0.103:8444/login'; // 测试环境API
var ecsPath = 'http://www.xxxxxx.com:8080/login/'; // 生产环境API
axios.post( localPath + 'login',
// axios.post( 'http://192.168.0.103:8444/jobs/collection',
{
'userName':'13637060395',
'userPwd':'123456',
'userType':"1"
//"resumeCode" : "131255615702958080"
},
{
headers: {
'Content-Type':'application/json',
//'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiI1QUZFRkQ4NTNFNjIwNDIyOEIwNDE3MzdCMDdBNEJCNURDNTBEQjA4OUFCQzBENDM4MDA5RkM4REU4QkMyODkzIiwidXNlck5hbWUiOiIxNzY4MTEzNTIwMSIsInVzZXJBZ2VudCI6Ik1vemlsbGEvNS4wIChXaW5kb3dzIE5UIDEwLjA7IFdpbjY0OyB4NjQpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS82OC4wLjM0NDAuMTA2IFNhZmFyaS81MzcuMzYiLCJleHAiOjE1NTE5MzYzODQsIm5iZiI6MTU1MTkzNDU4NH0.YgRW-Wnlk_Gz64id_jTocH68oj8DuZuI1WyQBmmrt7c'
}
},
)
.then(function (response) {
//console.log(response);
var reslutData=response;
console.log("authorization="+response.headers.authorization);
//console.log("reslutData" + reslutData.userName);
// // 成功之后执行跳转 (旧)
// this.$router.push({
// path: '/receData',
// query: {
// reslutData
// }
// });
}.bind(this))
.catch(function (error) {
console.log("请求失败"+error);
});
}
重要阐述:
用axios发送请求获取reponse header中的数据,需要提前在后台添加设置过滤器头部配置、自定义头部属性、并打开过滤器。
然后就是前端发送请求,然后获取reponse headers里面的自定义属性。
原来在默认的请求上, 浏览器只能访问以下默认的 响应头:(如下例)
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
而且使用捕获响应头的方法时,浏览器默认respose.headers 拿到的只有两个headers信息(如下列):
Object {
cache-control:"private, must-revalidate", // 默认无配置不显示
content-type:"application/json"
}
如果想让浏览器能访问到其他的 响应头的话:需要在服务器上设置 Access-Control-Expose-Headers
Access-Control-Expose-Headers : 'Authorization'
这样,前端才能成功获取Authorization
(如下图所示)
相关文章参考:
相关 · 格式 · 顺序 · 如下:
axios.post( 'http://192.168.0.103:8444/jobs/collection', // 参数1
{ // 参数2
'userName':'13637060395',
'userPwd':'123456',
'userType':"1"
//"resumeCode" : "131255615702958080"
},
{ // 参数3
headers: {
'Content-Type':'application/json',
//'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiI1QUZFRkQ4NTNFNjIwNDIyOEIwNDE3MzdCMDdBNEJCNURDNTBEQjA4OUFCQzBENDM4MDA5RkM4REU4QkMyODkzIiwidXNlck5hbWUiOiIxNzY4MTEzNTIwMSIsInVzZXJBZ2VudCI6Ik1vemlsbGEvNS4wIChXaW5kb3dzIE5UIDEwLjA7IFdpbjY0OyB4NjQpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS82OC4wLjM0NDAuMTA2IFNhZmFyaS81MzcuMzYiLCJleHAiOjE1NTE5MzYzODQsIm5iZiI6MTU1MTkzNDU4NH0.YgRW-Wnlk_Gz64id_jTocH68oj8DuZuI1WyQBmmrt7c'
}
},
)
// 其余部分省略
以上就是关于“ CORS跨域时axios无法获取服务器自定义的header信息 - 番外篇 ” 的全部内容。