vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法

首先,声明一下:在 windows 上启动的项目,mac 本另说,没法测试是否可用,故暂时只有 windows 的解决办法
后台 JAVA ,JWT 生成 token 进行验证,前台访问的时候,将 token 放入 header 里面携带过去,Authorization: Bearer token *******
vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第1张图片
后台会根据用户权限不同,生成不同的 token ,这个好恶心的说,权限多的生成的 token 忒大了也,后来将本地的 nodejs 升级之后,vue 启动的本地服务访问接口总是报一个 431 Request Header Fields Too Large 错误,看 network 请求,连发送都没发送给服务端就报错了,查了查发现 nodejs 升级之后默认大小改为了 8KB,这…一时很是懵逼…

看错误:
vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第2张图片

先上解决办法再唠嗑:
回退 nodejs 版本为低版本就好啦,是不是炒鸡煎蛋 (chao ji jian dan) ...

开个玩笑,开个玩笑,废话不多说,上截图,上代码,有图有真相…
vue2.x生成的 webpack 模板

mac 本的简单,直接找项目根目录下边的 package.json 文件,将 scripts 下边的 dev 指令修改一下(在下比较 Low ,用不起 mac ,找朋友远程指挥让他测试的,给的我最终结果),如下图:
vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第3张图片
直接复制拿走的 dev 指令:

node --max-http-header-size=1000000 ./node_modules/.bin/webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

接下来是 windows 的:
文件:node_modules/.bin/webpack-dev-server.cmd //看清楚中间的点,是点bin,打开node_modules第一个就是
vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第4张图片
vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第5张图片
vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第6张图片
改成这个样子:
vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第7张图片
来,代码放一下方便粘贴: 记得用前后空格隔开啊

"--max-http-header-size=1000000"

OK,这样就解决啦,没事儿的小伙伴可以撤啦,接下来可以唠嗑了

从官网上看到了一个东西:
vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第8张图片
再看
vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第9张图片
哦了,没有了,连个例子都没有,不是专门做 nodejs 开发的,真心不知道咋用啊…

看看解决办法过程吧

  1. 改 vue 项目根目录的 package.json 的 dev 命令,直接添加 --max-http-header-size=1000000 无效
  2. 找 node_modules 下边的 webpack-dev-server ,修改它的 package.json 文件,凡是 webpack-dev-server 的指令相关的挨个儿都添加一遍 --max-http-header-size=1000000 然后重启,次数太多了,而且项目比较大,文件比较多,电脑 i3+8G,卡的不行不行的,启动一次要一分钟以上,感觉…掏空…了… 还是不行–PASS掉
  3. 在 node_modules/webpackage-dev-server/bin/webpackage-dev-server.js 和 node_modules/webpackage-dev-server/lib/Server.js 和 根目录/build/webpack.dev.conf.js 三个文件里,用 process.argv.push(’–max-http-header-size=1000000’), 手动往 process.argv 里面插数据都不行,我&&…………%&……%&**&……()%……&%&,不说了,省略一万字
  4. 既然这个选项没有使用的 demo 其他的总不能都没有吧,然后去查了其他的命令行选项使用方法,终于…找到了,怀着无比忐忑的心情,赶紧的试一试(也就是上面的最终解决方法),重启,不报错了,哦耶(没蹦起来,压下了激动,赶紧总结一下
    找到的 demo 是下面这个选项的例子
    vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第10张图片
    vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法_第11张图片
    然后,把这个命令行选项换成了 --max-http-header-size=1000000 重启,一看报错没了,哦耶,可以可以,条条大路同罗马,一个命令行选项找不到使用 demo ,就找另一个,都是命令行选项,用法总是差不多的,搞定
    来来来,已经唠嗑到这儿了,最后大家再帮个忙,图个乐呵,增加下点击量 ,看看我另一篇博文【webpack-dev-server本地代理携带token访问服务端接口报431(Request Header Fields Too Large)错误,解决办法】

你可能感兴趣的:(vue,vue)