Vue/Reactでaxiosを使用したAPI通信時に500エラー

はじめに

dockerにaxiosを使用しててAPIからデータを取得する際に、500 (Internal Server Error)が出た。

結論先に述べると、container内ではlocalhostのような外部リンクでの通信はできないから。

目次

1. dockerなしの場合
2. dockerの場合
3. 参考文献

localでの場合

・proxyの設定はこんな感じ

frontend/vue.config.js

devServer: {
  proxy: {
   "/api": {
      target: "http://localhost:3000",
      changeOrigin: true,
      secure: false
    }
  }
}

frontend/views/Login.js

const handleSubmit = async () => {
  try {
    const res = await http.post('/api/users/login')
      console.log("res", res)
  } catch (error) {
     console.log("error", error)
  }
}

backend/routers/User.js

module.exports = router => {
  router.prefix("/api/users")
  router.post("/login", user.login)
}

・まずはpostmanを使って、apiはちゃんと動いているかをチェック。
・そもそもの話だが、バックエンドは実行されているかを確認する。
・lsof -i -P | grep "LISTEN"を使って、portはあっているかを確認する。
・フロントはproxyで/apiを追加したのに、バックエンド側では/apiを足されていない
・windowsの場合は、 "target": "localhost:3000"
　macの場合は、　"target": "http://127.0.0.1:3000"

docker compose環境の場合

・dockerを使う場合は、"target": http://container-name:port
・以下のケースの場合、"target": http://backend:3000に設定する必要がある

docker-compse.yml

version: '3'
services:
 mysql:
  ..........
 backend:
   ........
 frontend:
   ..........

参考文献

• https://stackoverflow.com/questions/45367298/could-not-proxy-request-pusher-auth-from-localhost3000-to-http-localhost500
• https://www.anchorblogs.com/details/8