提交form表单无法携带cookie问题解决方案

解决方案

• 一、问题背景
• 二、解决方案

一、问题背景

        该问题发生微服务项目单点登录环境下，业务为用户修改头像。具体细节就不说了，大致是我上传头像使用提交form表单的方式，且后台业务逻辑本身需要依赖cookie实现，但form表单无法携带cookie。

二、解决方案

1、手动获取该域名下所有cookie

        获取所有cookie的方式如下：

document.cookie

        打印到控制台我们看一下格式

        是key=value的格式，并且每个cookie之间用分号隔开，类型为字符串类型。
        如果你还想对cookie进行操作，可以引入jquery的cookie插件，可以直接去这个网址将js代码复制到一个js文件中，然后引入：

<script src="../static/js/jquery.cookie.js"></script>

2、将cookie放入表单并提交

        上面说了手动获取的所有cookie的格式以及数据类型，因为是string类型的，所以我们可以直接将其放入表单的输入框中，并将输入框设置为hidden格式
html代码：

<form id="dataForm" class="ui form" enctype="multipart/form-data" method="post"
              action="http://localhost:9527/user/uploadfile">
    <!-- 值通过js赋值,用于放手动获取的cookie,因为form提交没办法携带cookie  -->
    <input id="cookies" type="text" name="cookies" hidden>
    <div class="field inp">
        <label>用户名：</label>
        <!--这里踩过一个坑 不能用disabled 用那个的话往后台传，username为null-->
        <input id="username" type="text" name="username" readonly>
    </div>
    <div class="field">
        <label>头像：</label>
        <input id="file" type="file" name="file">
    </div>
    <div style="text-align: center;margin: 30px 0 150px 0">
        <!--type必须为submit-->
        <button class="ui blue button" id="confirm" type="submit">确定</button>
    </div>
</form>

js代码：

$('#cookies').val(document.cookie);

点击确定即可携带cookie提交表单

3、后台接收cookie并做数据处理

        由于我们是手动携带的cookie，所以后台需要进行参数接收与数据处理

public ResultVO uploadFile(@RequestParam("username")String username, @RequestParam("file")MultipartFile file,
                               @RequestParam("cookies")String cookies) {
    // 文件操作略

	//	cookie处理
	// 1.字符串分割,以分号分割拿到一个一个的key=value数组
	String[] cookiesArr = cookie.split(";");
	// 2.遍历数组
	for (String temp : cookiesArr) {
		// 3.用等号分割,拿到key和value,key为cookie[0],value为cookie[1]
		String[] cookie = temp.split("=");
	}
	
	// 其余操作略  
}

到此已解决form表单无法携带cookie问题

本文地址：https://blog.csdn.net/qq_41563912/article/details/110182049