502エラーで困った話

502(Bad Gateway)嫌い

フロントのフレームワークの勉強をしていてバック側で作成したapiを叩いてみたら502エラー

エラー内容

502(Bad Gateway)
upstream sent too big header while reading response header from upstream

問題：

chromeからurl直打ちでgetすると正常に表示される*のですが、
vue側でaxios.getを行うと502(bad gateway)エラーになります。

エラーが発生した環境

• docker仮想環境
• フロントエンド：Vue.js 2.6
• バックエンド　：Laravel 7
• dockerコンテナ：nginx, php-fpm

原因：

1. upstream sent too big header while reading response header from upstream
2. PCのスペック不足による仮想サーバのダウン

解決：

1. upstream sent too big header while reading response header from upstream

簡単な通信を行っているのでバッファを大きくする必要はなさそう。。
(一応言われたとおりにnginxとphp-fpmのレスポンスヘッダのためのバッファサイズをこの記事を参考に大きく確保しました。)

→これでは解決せず

1. PCのスペック不足による仮想サーバのダウン

これが一番ありそうだったのでPCを再起動後もう一度検証してみたらエラー出ませんでした。

→解決（？）

他に原因かもしれないこと

• ⌘ + shift + R (リソースから直接読み込み)だと100%502エラーになる
  →　複数リクエストが原因？