GoのEchoでオリジン間リソース共有の問題を解決

やりたいこと

フロント側の http://localhost:8080/ からバックエンド側の http://localhost:8080/ を呼び出したい
しかし以下のエラーがフロント側で出ていたので、これを解決したい

Access to XMLHttpRequest at 'http://localhost:8000' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

オリジン管理ソース共有に関してはこの記事では解説しませんが、 こちらの記事 がわかりやすかったです

環境情報

• vue
  • 2.6
• go
  • 1.15
  • echoをサーバーとして使用

解決方法

以下の設定を追加

e := echo.New()

// 以下を追加
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
    AllowOrigins: []string{"http://localhost:8080"},
    AllowMethods: []string{http.MethodGet, http.MethodPost, http.MethodPost, http.MethodDelete},
}))

無事フロント側からアクセスできる様になりました！

参考

• なんとなく CORS がわかる...はもう終わりにする。
  • https://qiita.com/att55/items/2154a8aad8bf1409db2b
• CORS Middleware
  • https://echo.labstack.com/middleware/cors