概要
フロント側はポート番号8080、サーバーサイド側はポート番号8008で立てた際にローカル環境でもCORSが起こったのでCORSの設定を行う
以下エラー発生時のChromeのコンソール部分
サーバー側のサンプルコード
単純にパラメータnameをPOSTするとtasksテーブルnameを登録できるというアプリです。
※実際にはトークンなども必要ですがここでは割愛します
main.go
package main
import (
"database/sql"
"log"
"net/http"
_ "github.com/go-sql-driver/mysql"
"github.com/labstack/echo"
)
func main() {
e := echo.New()
e.POST("/task", task)
e.Start(":8008")
}
type TaskParam struct {
TaskName string `json:"name"`
}
func dbConnect() *sql.DB {
db, err := sql.Open("mysql", "root:your_db_password/your_db_name")
if err != nil {
panic(err.Error())
}
return db
}
func task(c echo.Context) error {
param := new(TaskParam)
if err := c.Bind(param); err != nil {
return err
}
db := dbConnect()
// insert
ins, err := db.Prepare("INSERT INTO tasks(name) VALUES(?)")
if err != nil {
log.Fatal(err)
panic(err.Error())
}
ins.Exec(param.TaskName)
defer db.Close()
return c.HTML(http.StatusOK, "INSERT OK")
}
通常のCORS設定
単純なGETとかPOST、PUT、DELETEを許可させる場合は以下のようにe.Use(middleware.CORS())を追加すればとりあえずローカル環境だけの場合はOKでした。
main.go
func main() {
e := echo.New()
// CORSの設定追加
e.Use(middleware.CORS())
e.POST("/task", task)
e.Start(":8008")
}
importにgithub.com/labstack/echo/middlewareを以下のように追加
main.go
import (
"database/sql"
"log"
"net/http"
_ "github.com/go-sql-driver/mysql"
"github.com/labstack/echo/middleware" // 自動追加されてなければ追加する
"github.com/labstack/echo"
)
厳密なCORSの設定
まだ試してないのですが公式のドキュメントに以下のコードを追加し、AllowOriginsとAllowMethodsを適切に設定することで異なるドメイン間でもやり取りできるように設定できるみたいです。
main.go
func main() {
e := echo.New()
// 厳密にCORSを設定する（以下公式のサンプルコード）
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
AllowOrigins: []string{"https://labstack.com", "https://labstack.net"},
AllowMethods: []string{http.MethodGet, http.MethodPut, http.MethodPost, http.MethodDelete},
}))
e.POST("/task", task)
e.Start(":8008")
}
type TaskParam struct {
TaskName string `json:"name"`
}