APIのリクエストが２重で実行されてしまう

Question

JSのクライアントから Goで書かれたAPIサーバにリクエストするようなシステムを作りたいです。

JSクライアントのサーバとGoのAPIサーバは別で実行されていることを想定しています。

以下のような簡単な GoのAPIサーバをローカルの8080ポートで動かしてます。

package main

import (
	"fmt"
	"log"
	"net/http"
)

func handle(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Access-Control-Allow-Origin", "*")
	w.Header().Set("Access-Control-Allow-Headers", "Content-Type")

	fmt.Println("aaa")

	w.WriteHeader(http.StatusOK)
	fmt.Fprint(w, "SUCCESS")
}

func main() {
	http.HandleFunc("/", handle)
	log.Fatal(http.ListenAndServe(":8080", nil))
}

ここで別の ローカルポート 3000 で動かしている JSクライアントからサーバにPOSTを実行します。

fetch(
  "http://localhost:8080/",
  {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({"test": 1})
)

上記を実行すると、APIサーバの方の標準出力には aaa が２回表示されます。
これは JSのコードが２回実行されているわけではなく、上記をコンソールから実行しても 2重で実行してしまうようです。
ブラウザの開発者ツールのネットワーク情報を見たところリクエストは１回しか発行されていないので、サーバ側の問題かもしれないとは思っています。

こちらの再現方法ですが、 headers の中身を空にすると問題なく 1回しか実行されないようです。
また、サーバ側からヘッダーの中身を見てみると、１回目は Content-Type が渡ってきておらず 2回目に Content-Type が入ったヘッダーのリクエストが実行されているようでした。

こちらが２重実行してしまう原因を、ご存知の方いらっしゃいませんでしょうか？

Answer 1

Goのソースは1回しか出力しないように見えますので、おそらくpreflight request分かなと思います。

<参考>
https://qiita.com/nnishimura/items/1f156f05b26a5bce3672

handle内でHTTPメソッドを確認してみると詳細が分かるかと。

<参考> POSTメソッドのみに対応
https://www.yoheim.net/blog.php?q=20170403#t7

Comments

[orihime]

preflight のことを、あまり認識していませんでした。
意識しなくても勝手にやってくれるものだと思っていました。

`Access-Control-Allow-Headers` で `X-Csrftoken` を許可して（ preflight に必要そう）、
`Access-Control-Allow-Methods` で `POST` を許可したら preflight が思った通りの動作をするようになりました。

2回処理してしまう部分は、とりあえず `r.Method == http.MethodOptions` を return して対応すると避けれましたが、これが良いのかはもう少し調べてみます。

ありがとうございました。

Answer 2

fetchするならFormDataの方が直感的では？

const url="http://localhost:8080/";
const method="POST";
const body= new FormData();
body.append("test",1);
fetch(url,{method,body}).then(res=>res.text()).then(console.log);