CORS跨域时axios无法获取服务器自定义的header信息 - 番外篇

已解决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':'13300000001',
					'userPwd':'123456',
					'userType':"1"
					//"Code" : "102464132163032958080"
				},
				{
					headers: {
						'Content-Type':'application/json',
						//'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiI1QUZFRkQ4NTNFNjIwNDIyOEIwNDE3MzdCMDdBNEJCNURDNTBEQjA4OUFCFFSAF8S21AF6S1AFDAFMyODkzIiwidXNlck5hbWUiOiIxNzY4MTEzNTIwMSIsInVzZXJBZ2VudCI6Ik1vemlsbGEvNS4wIChXaW5kb3dzIE5UIDEwLjA7IFdpbjY0OyB4NjQpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS82OC4wLjM0NDAuMTA2IFNhZmFyaS81MzcuMzYiLCJleHAiOjE1NTE5MzYzODQsIm5iZiI6MTU1MTkzNDU4NH0.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 （如下图所示）

---

相关文章参考：

• 代码学堂
• Vuejs之axios获取Http响应头

相关 · 格式 · 顺序 · 如下：

        axios.post( 'http://192.168.0.103:8444/jobs/collection',	 // 参数1

				{											 // 参数2
					'userName':'13300000001',
					'userPwd':'123456',
					'userType':"1"
					//"resumeCode" : "132356498258080"
				},
				{											 // 参数3
					headers: {
						'Content-Type':'application/json',
						//'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiI1QUZFRkQ4NTNFNjIwNDIyOEIwNDE3MzdCMDdBNEJCNURDNTBEQjA4OUFAFDDSAFSASFS45ODkzIiwidXNlck5hbWUiOiIxNzY4MTEzNTIwMSIsInVzZXJBZ2VudCI6Ik1vemlsbGEvNS4wIChXaW5kb3dzIE5UIDEwLjA7IFdpbjY0OyB4NjQpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS82OC4wLjM0NDAuMTA2IFNhZmFyaS81MzcuMzYiLCJleHAiOjE1NTE5MzYzODQsIm5iZiI6MTU1MTkzNDU4NH0.YgRW-Wnlk_Gz64id_jTocH68oj8DuZuI1WyQBmmrt7c'
					}
				},
			)

 //  其余部分省略
 

---

以上就是关于“ CORS跨域时axios无法获取服务器自定义的header信息 - 番外篇 ” 的全部内容。