java工程(ajax/axios/postman)向请求头中添加消息

1、问题概述

在项目中我们经常会遇到需要向请求头中添加消息的场景，然后后端通过request.getRequest()或者@RequestHeader获取请求头中的消息。

下面提供几种前端向请求头添加消息的方式

2、创建一个springmvc工程用于测试

2.1、创建工程并引入相关包信息

spring-webmvc:springmvc的包

jackson：将结果转化成json字符串的包

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.txc</groupId>
  <artifactId>springmvcdemo1</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <dependencies>
     <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
	<dependency>
	    <groupId>org.springframework</groupId>
	    <artifactId>spring-webmvc</artifactId>
	    <version>5.3.28</version>
	</dependency>
	
	<dependency>
           <groupId>com.fasterxml.jackson.core</groupId>
           <artifactId>jackson-databind</artifactId>
           <version>2.11.4</version>
       </dependency>
       <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-core</artifactId>
          <version>2.11.4</version>
        </dependency>
        <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-annotations</artifactId>
          <version>2.11.4</version>
       </dependency>
       
       <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
		<dependency>
		    <groupId>commons-fileupload</groupId>
		    <artifactId>commons-fileupload</artifactId>
		    <version>1.4</version>
		</dependency>
  </dependencies>
</project>

2.2、创建后端测试方法

@ResponseBody:表示是一个异步请求，且返回json类型的数据

@RequesetHeader:表示从请求中获取参数username，如果请求中不包括username参数程序会报错。

@Controller
public class HeadersController {
	
	@GetMapping("/testHeaders")
	@ResponseBody
	public String testHeaders(@RequestHeader String username){
		System.out.println("======username====="+username);
		return username;
	}

}

2.3、通过jQuery向请求头添加信息

在工程中需要引入jQuery的包信息，如果没有jQuery包，下面提供了源码下载

2.3.1、创建ajax.html发送请求并添加头消息

头消息在jQuery中可以通过headers参数和beforeSend函数发送

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $.ajax({
    	url:"testHeaders",
    	type:"get",
    	headers:{"username":"xiaochun"},
    	cache:false,
    	beforeSend:function(request){
    		request.setRequestHeader("userid","1001");
    	},
    	success:function(msg){
    		alert(msg.code);
    	}
    });
  </script>
</head>
<body>
</body>
</html>

2.3.2、请求后效果如下

2.4、在HTML页面中使用axios添加消息头

2.4.1、下载axios包

下载地址：https://github.com/axios/axios#example

2.4.2、在工程中引入axios的包信息

在axios的dist目录中找到axios.js文件，引入到工程中

2.4.3、创建axios.jsp页面测试axios添加消息头

通过axios.create设置公共参数，在headers中设置请求头消息

如果不会使用axios.create可以参照如下博客：

https://blog.csdn.net/tangshiyilang/article/details/134678945

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
const instance = axios.create({
	  timeout: 1000,//设置请求超时时间
	  headers: {
		  'X-Custom-Header': 'foobar',
	      'username':'xiaochun'
		  }
	});
 
    instance.get("testHeaders",{
	   params:{
		   username:"xiaochun",
		   usersex:"男"
	   }
   }).then(function (response) {
  	 console.log("======程序成功===="+response.data.code);
	  }).catch(function (error) {
		  console.log("======程序异常===="+error);
	  }).finally(function () {
		  console.log("======程序结束===="); 	 
	  });

</script>
</head>
<body>
</body>
</html>