[筆記] Vue-cli HTTP 431 Error 錯誤排查解決記錄

章節連結

前幾天在執行 Vue-Cli 搭配 Axios 發送請求到後端時,出現了過往沒看過的 HTTP 431 Error ( Request Header Fields Too Large ) 的錯誤。這邊筆記下可能成因和解決方法。
vue.js logo vue


成因

1. Vue-Cli 背後是利用 Node.js 所提供的 http 服務,其預設值目前僅有 8KB 或是 16KB ( 依你的 Node.js 版本而定 )。換言之,你可以透過指令的方式,將這個值給提升
2. 你的前端路由經由 Proxy 或是直接 fetch api,因為路徑失效導致 api 一直發送,導致最後出現  HTTP 431 Error ( Request Header Fields Too Large )

解決方法

1. 先行檢查一下你的路由位置,是否真的存在。
2. 如果確定路由是有效的,那才來調整 Request Header Fields 大小。
如果你是 Linux 家族系統,那可以直接使用 NODE_OPTIONS=’–maxhttpheadersize=100000‘ 來更改
如果你是 Windows 系統,那得修改 node_modules/.bin/vue-cli-service.cmd 內的文件
“%_prog%” “–max-http-header-size=1000000” “%dp0%\..\@vue\cli-service\bin\vue-cli-service.js” %*


參考資料

1. Node.js –max-http-header-size=size
2. nodeJS max header size in http.request
3. http code 431错误(Request Header Fields Too Large)错误

按讚加入粉絲團

延伸閱讀