[Web] 以iris建立允許CORS請求的JSON API server

先決基礎知識

Golang, JavaScript, ES6

學習目標

網路知識：到MDN了解什麼是跨來源資源共用 Cross-Origin Resource Sharing (CORS)。
JSON server： 將iris Application掛載可自動發送CORS標頭的cors中間件 (Github, GoDoc說明文件, 官方範例程式)
Web Client:參考MDN的Fetch API使用方法，用JavaScript從遠端取得資料。

程式碼

JSON server：

package main

import (
  "github.com/iris-contrib/middleware/cors"
  "github.com/kataras/iris"
)

type tmp struct {
  ValBool    bool   `json:"valBool"`
  ValString  string `json:"valString"`
}

func main() {

  // 建立一個允許cors的context.Handler
  crs := cors.AllowAll()

  // 建立iris Application，並且掛載crs作為middleware
  app := iris.New()
  app.Use(crs)
  app.AllowMethods(iris.MethodOptions)

  app.Post("/api", func(ctx iris.Context) {
    j := tmp{
      ValBool:     true,
      ValString:   "abc",
    }
    ctx.JSON(j)
  })
  app.Run(iris.Addr(":38080"), iris.WithCharset("UTF-8"))
}

Web client (按F12在Chrome的console中查看結果)：

<script type= application/javascript>
 var url = "http://localhost:38080/api";
   fetch(url, {
    method: 'POST',
    body: JSON.stringify({}),
    credentials: 'include',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then(res=>res.json())
    .catch(error => console.error('Error:', error))
    .then((res)=>console.log(res))
</script>