前幾天在執行 Vue-Cli 搭配 Axios 發送請求到後端時，出現了過往沒看過的 HTTP 431 Error ( Request Header Fields Too Large ) 的錯誤。這邊筆記下可能成因和解決方法。
成因
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=’–max–http–header–size=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）错误
