Go言語 + WebAssemblyでHTTP requestを送信する

こんにちは、ひがしです。
今回はGo+WebAssemblyでlocalhostからlocalhostにhttp requestを送信する方法などについて書いていきます。

CORSについて

まず、CORSについての話をしないといけません。
CORSとはCross Origin Resource Sharingの略で、異なるオリジンにあるリソースへのアクセス権を与えるようにブラウザに指示を出すもので、こちらがないとGo+WebAssemblyでのhttp requestが成功しませんでした。
詳しくはこちらの記事を参照してください。

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

書いていこう

環境

• OS
  • manjaro Linux
• Go compiler
  • 1.13.6
• Browser
  • Google Chrome 79.0.3945.130 (Official Build) (64bit)

クライアント側

以下の要領で基本的なWebAssemblyを使える環境を作ります

fish

$ mkdir wasm-test
$ cd wasm-test
$ set -x WHICHGO (go env GOROOT)
$ cp $WHICHGO/misc/wasm/wasm_exec.js .

bash

$ mkdir wasm-test
$ cd wasm-test
$ WHICHGO=`go env GOROOT`
$ cp $WHICHGO/misc/wasm/wasm_exec.js .

クライアントのコードを書く

以下のようなGET requestを送るGoのコードを書きます

index.htmlは以下のものを使用します。

書いたGoのコードを以下のコマンドでWebAssemblyとして使えるようにします。

fish

$ env GOOS=js GOARCH=wasm go build -o main.wasm main.go

bash

$ GOOS=js GOARCH=wasm go build -o main.wasm main.go

クライアント側の準備はこれで終わりなのであとは以下のコマンドでindex.htmlにアクセスできるようにしておきましょう

$ goexec 'http.ListenAndServe(`:3000`, http.FileServer(http.Dir(`.`)))'

サーバー側

今回の本題みたいなところのサーバーのコードを書きます。
CORSで許可をするのはサーバー側なのでこちらにCORS関係のコードを書きます。

今回はgin-gonic/ginとgin-contrib/corsを使用します。

• github.com/gin-gonic/gin
• github.com/gin-contrib/cors

簡単なlocalhost:8080にアクセスするとhogeを返してくれるサーバーを書きました。

このコードの

router.Use(cors.Default())

の部分ですべてのオリジンからのアクセスを許可しています。

特定のオリジンを指定して許可する方法はgin-contrib/corsのREADMEに乗っています。

実行

クライアント、サーバーを起動してlocalhost:3000にアクセスし、F12キーを押すと以下のような状態になると思います。

そこから送信ボタンをクリックし、consoleに以下のような表示がでれば成功です。

いいね

まとめ

CORSの認証に関してはサーバー側で実装します。
私はこれにハマり1時間くらい唸ってました。

次はGo + WebAssemblyでhtmlのテキストボックスからデータを取る方法について書きます。