先決基礎知識
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>