编写接口时出现【431 (Request Header Fields Too Large)】

问题遇到的现象和发生背景

不能通过接口获取到后台的数据

问题相关代码,请勿粘贴截图

不知道是哪里引起的错误(关于接口,我写了vue文件,axios.js,request.js,vue.config.js,main.js,store.js这几个文件都有涉及)
下面pose上我认为可能出现的问题的文件代码

axios.js文件
需要获取接口的vue文件

created() {
      // 页面加载时获取菜单
      this.getMenuList();
  },
  methods: {

    handleSelect() {},
    getMenuList() {
      // 获取菜单
        apiGet('getUserInit.do',{})
        .then((res) => {
        console.log(res.data);
        this.roleMenuList = res.data.roleMenuList;
        console.log(this.roleMenuList);
      });

    },
  },

 //自定义一个Axios实例化对象
const service = axios.create({
  // axios中请求配置有baseURL选项,表示请求URL公共部分
  // baseURL:process.env.BASE_URL,
  baseURL:"/api",
  // 超时
  timeout:50000,
  // withCredentials: true,
});

// request拦截器
service.interceptors.request.use(
    (config) => {
    if (config.method === 'post') {
      let curPost = config.baseURL.split("/")[config.baseURL.split("/").length - 1];
      console.log("curPost")
      // console.log(curPost)
        if (curPost === "uploadpicture" || curPost === "fileUpload"|| curPost === "upload.do") {
          return config; // 这里对上传文件/图片的 api 不做传参序列化处理
        } else {
          config.data = qs.stringify(config.data);
          if(store.getters.getSessionId != undefined) {
            config.headers = {
              // "Content-type": "application/json;charset=UTF-8",
              "Content-type": "application/x-www-form-urlencoded;charset=UTF-8",
              "token" : store.getters.getSessionId
            };
          }

          console.log("config")
          // console.log(config)
          return config;
        }
    }
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
);

//liao 添加响应拦截器
service.interceptors.response.use(response => {
  // 接收到响应数据并成功后的一些共有的处理,关闭loading等
  if (response.status === 200) {
    if(response.data.isOk == 'O') {
      var dialogFormVisible = true;
      store.commit("setHome", dialogFormVisible);
    }
    //这里获取token,使用cookie保存token
    if (response.headers.authorization) {
      let token = response.headers.authorization;
      setToken('Authorization', token)
    }
    return response.data;
  } else {
    console.log(response);
    return Promise.reject();
  }
}, error => {
return Promise.resolve(error.response)
})


/

vue.config.js文件


module.exports = {
  //打包时要用到的
  publicPath: './',
  //关闭格式检查
  lintOnSave: false,
  //打包时不会生成.map文件,加快打包速度
  productionSourceMap:false,
  //跨域问题
  devServer: {
    open: true, // 自动打开浏览器
    // 修复使用hostname访问,就会显示invalid host header。
    disableHostCheck: true,
    //服务器地址主机名
    host:'0.0.0.0',
    //服务器端口号
    port:'8080',
    //配置跨域
    proxy:{
      '/':{
          //这里后台的地址,
          target:'http://localhost:8080',
          // 如果要代理websockets
          ws: true,
          //允许跨域
          changeOrigin:true,
          pathRewrite:{
            // 使用 `/api` 代替 `target` 要访问的跨域的域名
            '^/':''
          }
      }
    }
  }
}



运行结果及报错内容

控制台出现该错误 431 (Request Header Fields Too Large)
在application也没看到token的值

我的解答思路和尝试过的方法

有检查我上面说的各个文件夹,但是无一所获。
也有找过同事,一开始说是后端的问题,后来又说不是后端的问题
在网上找过很多文章最终没能解决

我想要达到的结果

迫切想 正常获取到接口的数据。