【Go言語】mux + cors + alice でサーバーを作成する時に注意すること。特にCORS周りでハマったことについて。

## はじめに

[gorilla/mux](https://github.com/gorilla/mux)、[rs/cors](https://github.com/rs/cors)、[justinas/alice](https://github.com/justinas/alice)を組み合わせてサーバーを作る方法を紹介します。特に、パスによって適用するミドルウェアを分けようとした時に、CORSでハマったので、そこに関わる部分を重点的に説明します。掲載するコード中では、基本的にエラーを無視する書き方なので、適宜書き換えてください。また、コード中の `...` は単純に省略を意味し、文法的な意味はありませんのでコピペする際は注意してください。

## tl;dr

プリフライトリクエストの `OPTIONS` メソッドに気をつけましょう。

## mux、cors、aliceの簡単な概要

いくつかの例を示しますが、それぞれのREADMEに書かれているような基本的な内容ですので、分かっている方は[実装本題](#実装本題)まで飛ばしてください。

### gorilla/mux

muxを用いたサーバーの例を示します。

```Go
package main

import (
  "encoding/json"
  "net/http"

  "github.com/gorilla/mux"
)

type Character struct {
  Name string `json:"name"`
}

func pilotFunc(w http.ResponseWriter, r *http.Request) {
  res, _ := json.Marshal(Character{"Shinji"})
  w.WriteHeader(http.StatusOK)
  w.Write(res)
}

func angelFunc(w http.ResponseWriter, r *http.Request) {
  res, _ := json.Marshal(Character{"Adam"})
  w.WriteHeader(http.StatusOK)
  w.Write(res)
}

func main() {
  r := mux.NewRouter()  // r は *mux.Router 型
  r.Methods("GET").Path("/pilot").HandlerFunc(pilotFunc)  // r.routes に *mux.Route を追加する。
  r.Methods("GET").Path("/angel").HandlerFunc(angelFunc)  // r.routes は []*mux.Route 型なので、どんどん追加できる。

  http.ListenAndServe(":8000", r)
}
```

これだけで、ちょっとしたサーバーが完成です。

```bash
$ go run main.go

$ curl http://localhost:8000/pilot
{"name": "Shinji"}
```

しかし、ブラウザーから `fetch` を使った場合、以下のようなエラーが発生します。

```js
Access to fetch at 'http://localhost:8000/user' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

## rs/cors

そこで登場するのが、 [rs/cors](https://github.com/rs/cors)です。CORSについては、[MDNのページ](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)が分かりやすいです。CORSに対応するためには、サーバー側でレスポンスヘッダに適切な値を設定する必要があります。そこら辺を担ってくれるのが、 [rs/cors](https://github.com/rs/cors)です。先ほどの例にrs/corsを追加したものです。

```Go
import (
  ...
  "github.com/rs/cors"
)

func main() {
  r := mux.NewRouter()
  r.Methods("GET").Path("/pilot").HandlerFunc(pilotFunc)
  r.Methods("GET").Path("/angel").HandlerFunc(angelFunc)
  c := cors.Default().Handler(r)  // 追加した。

  http.ListenAndServe(":8000", c)  // r から　c に変更した。
}

```

一行追加するだけでCORSに対応することができます。

### justinas/alice

さらに、リクエストの内容を都度ログに出力するようなミドルウェアや、メインの処理を行う前にリクエストヘッダから値を取得するミドルウェアを追加したいと思った時に活躍するのが、[justinas/alice](https://github.com/justinas/alice)です。リクエストの情報をログに出力するミドルウェアを自作し、追加した例を示します。

```Go
import (
  ...
  "log"

  "github.com/justinas/alice"
)

func logHandler(h http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    log.Printf("Method: %v; URL: %v; Protocol: %v", r.Method, r.URL, r.Proto)
    h.ServeHTTP(w, r)
  })
}

func main() {
  r := mux.NewRouter()
  r.Methods("GET").Path("/pilot").HandlerFunc(pilotFunc)
  r.Methods("GET").Path("/angel").HandlerFunc(angelFunc)
  c := cors.Default()
  chain := alice.New(c.Handler, logHandler).Then(r)  // 追加した。

  http.ListenAndServe(":8000", chain)  // c から chainに変更した。
}
```

## 実装本題

さて、[gorilla/mux](https://github.com/gorilla/mux)、[rs/cors](https://github.com/rs/cors)、[justinas/alice](https://github.com/justinas/alice)を全て組み合わせたものを再掲します（packge、import、structの定義は省略）。

```Go
...

func pilotFunc(w http.ResponseWriter, r *http.Request) {
  res, _ := json.Marshal(Character{"Shinji"})
  w.WriteHeader(http.StatusOK)
  w.Write(res)
}

func angelFunc(w http.ResponseWriter, r *http.Request) {
  res, _ := json.Marshal(Character{"Adam"})
  w.WriteHeader(http.StatusOK)
  w.Write(res)
}

func logHandler(h http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    log.Printf("Method: %v; URL: %v; Protocol: %v", r.Method, r.URL, r.Proto)
    h.ServeHTTP(w, r)
  })
}

func main() {
  r := mux.NewRouter()
  r.Methods("GET").Path("/pilot").HandlerFunc(pilotFunc)
  r.Methods("GET").Path("/angel").HandlerFunc(angelFunc)
  c := cors.Default()

  chain := alice.New(c.Handler, logHandler).Then(r)

  http.ListenAndServe(":8000", chain)
}
```

しかし、この方法だと、全てのリクエストに対して、設定したミドルウェアを適用してしまいます。

例えば `/pilot` はログインしているかどうかをチェックして、ログインしている場合のみデータを返すけど、 `/angel` はログインしていなくてもデータを返すというような要望に対応できません。Qiitaであれば、記事のページはログインしていなくても見ることができるが、マイページの下書きなどはログインしていないと見ることができないというような状況をイメージしてください。

そこで、以下のように工夫してみます。先に言っておきますが、下の書き方だとハマります（笑）。

```Go
type funcHandler struct {
  handler func(w http.ResponseWriter, r *http.Request)
}

func (h funcHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
  h.handler(w, r)
}

func pilotFunc(w http.ResponseWriter, r *http.Request) {...}
func angelFunc(w http.ResponseWriter, r *http.Request) {...}
func logHandler(h http.Handler) http.Handler {...}

func authHandler(h http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    log.Println("Authentication")
    h.ServeHTTP(w, r)
  })
}

func main() {
  c := cors.Default()

  logChain := alice.New(c.Handler, logHandler)
  authChain := logChain.Append(authHandler)

  r := mux.NewRouter()
  r.Methods("GET").Path("/pilot").Handler(authChain.Then(funcHandler{pilotFunc}))
  r.Methods("GET").Path("/angel").Handler(logChain.Then(funcHandler{angelFunc}))

  http.ListenAndServe(":8000", r)
}
```

これで、 `/pilot` に `fetch` した場合のみ、標準出力に `Authentication`　と出力されます。これで、パスによって適用するミドルウェアを分けることが可能となりました。

```bash
$go run main.go
2020/09/29 20:41:18 Method: GET; URL: /pilot; Protocol: HTTP/1.1
2020/09/29 20:41:18 Method: GET; URL: /pilot; Protocol: HTTP/1.1; Authentication
2020/09/29 20:41:18 Method: GET; URL: /angel; Protocol: HTTP/1.1
```

これがハマる理由の説明は一度置いておいて、このように書き換えられるメカニズムを簡単に説明します。ハマる理由を先に見たい方は、[ハマる理由](#ハマる理由)に飛んでください。

### 書き換えられる理由(補足)

まず、 `http.ListenAndServer` がやっていることを確認しようかと思いますが、[【Go】 net/httpパッケージを読んでhttp.HandleFuncが実行される仕組み](https://qiita.com/imamura_sh/items/1d1c64d05f7e72e31a98)がかなり詳しいので、こちらに丸投げします。少し情報が古いようで表記されている行番号と実際の行番号が一致していなかったり、多少書き方が変わっていたりしますが、基本的な理解をする上で支障はないと思います。

結論を言うと、 `http.ListenAndServe` では、受け取ったリクエストを、第二引数(今回は `mux.Router`) の `ServeHTTP` に渡します。したがって、第二引数は `ServeHTTP` が実装されている必要があります。 `mux.Router` には `ServeHTTP`　が実装されている他、 `http` パッケージ内で、

```Go
type Handler interface {
    ServeHTTP(ResponseWriter, *Request)
}
```

と定義されているため、任意の `http.Handler` 型の変数は `ListenAndServe` の第二引数になり得ます。この `ServeHTTP` 内で、他の `http.Hanlder` の `ServeHTTP` を呼び、さらにその `ServeHTTP` 内で、他の `http.Hanlder` の `ServeHTTP` を呼び、、というように、 `http.Handler` を連鎖させることで、リクエストに対して順に処理を行っていくことができます。

つまり、 `http.Handler` を引数として受け取り、 `http.Handler` 型を返す関数、**つまりミドルウェア**、を用いることで、ハンドラーを連鎖させることができます。例として、 `logHandler` と `authHandler` の連鎖を考えると、

```Go
chain := logHandler(authHandler(router))
```

というような連鎖が考えられます。ただ、この方法だと、ミドルウェアの数が増えるほど分かりにくくなるので、aliceを用いて、

```Go
chain := alice.New(logHandler, authHandler).Then(router)
```

と簡潔に書いています。

ここで、パスによって適用するミドルウェアを変えられるように書き換える前と書き換えた後を比較してみます。

```Go
// 変更前
func main() {
  r := mux.NewRouter()
  r.Methods("GET").Path("/pilot").HandlerFunc(pilotFunc)
  r.Methods("GET").Path("/angel").HandlerFunc(angelFunc)
  c := cors.Default()
  chain := alice.New(c.Handler, logHandler).Then(r)
  http.ListenAndServe(":8000", chain)
}

// 変更後
func main() {
  c := cors.Default()
  logChain := alice.New(c.Handler, logHandler)
  authChain := logChain.Append(authHandler)
  r := mux.NewRouter()
  r.Methods("GET").Path("/pilot").Handler(authChain.Then(funcHandler{pilotFunc}))
  r.Methods("GET").Path("/angel").Handler(logChain.Then(funcHandler{angelFunc}))
  http.ListenAndServe(":8000", r)
}
```

したがって、変更前後のリクエストがたどるフローは、

```
前: request -> CORS    -> logging -> routing           -> pilotFunc or angelFunc
後: request -> routing -> CORS    -> logging (-> auth) -> pilotFunc or angelFunc 
```

となり、ルーティングの順番が変化していることが分かります。これが、ハマる一因です。

次に、この記事の本題である、CORSでハマる理由を説明します。

## ハマる理由

まず、認証の仕組み(詳しくは後述)を少し現実のものに近づけて実装したものを記します。

```Go
func authHandler(h http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    token := r.Header.Get("Token")
    if token == "" {
      w.WriteHeader(http.StatusUnauthorized)
      return
    }
    h.ServeHTTP(w, r)
  })
}
```

<details>
<summary>コード全体</summary>
<div>

```Go
package main

import (
  "encoding/json"
  "log"
  "net/http"

  "github.com/gorilla/mux"
  "github.com/justinas/alice"
  "github.com/rs/cors"
)

type Character struct {
  Name string `json:"name"`
}

type funcHandler struct {
  handler func(w http.ResponseWriter, r *http.Request)
}

func (h funcHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
  h.handler(w, r)
}

func pilotFunc(w http.ResponseWriter, r *http.Request) {
  res, _ := json.Marshal(Character{"Shinji"})
  w.WriteHeader(http.StatusOK)
  w.Write(res)
}

func angelFunc(w http.ResponseWriter, r *http.Request) {
  res, _ := json.Marshal(Character{"Adam"})
  w.WriteHeader(http.StatusOK)
  w.Write(res)
}

func logHandler(h http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    log.Printf("Method: %v; URL: %v; Protocol: %v", r.Method, r.URL, r.Proto)
    h.ServeHTTP(w, r)
  })
}

func authHandler(h http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    token := r.Header.Get("Token")
    if token == "" {
      w.WriteHeader(http.StatusUnauthorized)
      return
    }
    h.ServeHTTP(w, r)
  })
}

func main() {
  c := cors.Default()
  logChain := alice.New(c.Handler, logHandler)
  authChain := logChain.Append(authHandler)
  r := mux.NewRouter()
  r.Methods("GET").Path("/pilot").Handler(authChain.Then(funcHandler{pilotFunc}))
  r.Methods("GET").Path("/angel").Handler(logChain.Then(funcHandler{angelFunc}))
  http.ListenAndServe(":8000", r)
}

```

</div>
</details>

この状態で、

```js
fetch(url, {
  headers: new Headers({
    Token: "abcd"
  })
})
```

を実行すると、、、、

```js
Access to fetch at 'http://localhost:8000/pilot' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

**エラーが生じます。**

ハマる理由を理解するには、

1. 認証の仕組み
2. プリフライトリクエスト
3. リクエストの処理の順番

の3点がを把握しておく必要があります。順に説明していきます。

### 1. 認証の仕組み

認証を行う際には、Cookieを使う場合もTokenを使う場合もリクエストヘッダに載せてフロントエンドからバックエンドに渡す必要があります。そのため、例で使用した `authHandler` をより現実に近いものに実装し直すと、

```Go
func authHandler(h http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    token := r.Header.Get("Token")
    if token == "" {
    ...
    }
    ...
    h.ServeHTTP(w, r)
  })
}
```

というようなものになります。ここで重要なのは、CookieやTokenであると分かるような**ヘッダ名を新たに追加する必要がある**ということです。

### 2. プリフライトリクエスト

実はCORSには制限があって、メソッドおよびヘッダに設定できる値が下記の条件を満たした時にのみ「単純リクエスト」を行うことができます。ここで、単純リクエストとは、一般的なリクエストのことを指します。

> method : GET, POST, HEAD
> header : Accept, Accept-Language, Content-Language, Content-Type(application/x-www-form-urlencoded, multipart/form-data, text/plain), DPR, Downlink, Save-Data, Viewport-Width, Width

したがって、**ヘッダに `Cookie` や `Token` のような値を独自で設定する場合、単純リクエストはできません**。この場合、**プリフライトリクエスト**というリクエストを事前に行います。詳しくは、[MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)を見てください。必要な情報のみ書くと、まず、プリフライトリクエストとして、 `OPTIONS` メソッドでリクエストが送られます。このプリフライトリクエストに対して、正常なレスポンスが返ってきた場合にのみ、続けて、 `Token` などの値をヘッダに載せて、 `GET` や `POST` リクエストを送ります。したがって、 `fetch` を使う場合、裏では2回リクエストが送られています。

### 3. リクエストの処理の順番

ここまでをまとめると、独自に設定したHeaderの値を使用する場合、プリフライトリクエストが送信されます。ここで、複数のミドルウェアを適用できるように変更する前と後のフローを再掲します。

```
前: request -> CORS    -> logging -> routing           -> pilotFunc or angelFunc
後: request -> routing -> CORS    -> logging (-> auth) -> pilotFunc or angelFunc 
```

CORSのミドルウェアのの [`Handler`](https://github.com/rs/cors/blob/8b4a00bd362b5f326bff479ebe0af7862868225e/cors.go#L202) を見てみると、

```Go
func (c *Cors) Handler(h http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    if r.Method == http.MethodOptions && r.Header.Get("Access-Control-Request-Method") != "" {
      ...
      w.WriteHeader(http.StatusNoContent)
    } else {
      ...
      h.ServeHTTP(w, r)
    }
  })
}
```

というように、Optionsメソッドの場合とそうでない場合で処理を分岐し、適切にプリフライトリクエストに対処しています。次に、 `mux.Router` の [`ServeHTTP`](https://github.com/gorilla/mux/blob/d07530f46e1eec4e40346e24af34dcc6750ad39f/mux.go#L173) を見てみると、

```Go
func (r *Router) ServeHTTP(w http.ResponseWriter, req *http.Request) {
  ...
  if r.Match(req, &match) {
    handler = match.Handler
    ...
  }

  if handler == nil && match.MatchErr == ErrMethodMismatch {
    handler = methodNotAllowedHandler()
  }

  if handler == nil {
    handler = http.NotFoundHandler()
  }

  handler.ServeHTTP(w, req)
}
```

リクエストの `url` の値が一致している `handler` を探し、あればそれを、なければ、メソッドがエラーな場合と、そもそもルーティングがエラーである場合で分岐し、エラーを処理しています。

したがって、複数のミドルウェアを適用できるように変更する前後で、プリフライトリクエストに対しての処理が以下のように変わっています。

```
前: preflight request -> CORS check    -> 204 No content
後: preflight request -> routing check -> 405 Method Not Allowed
```

このような理由で、CORSエラーが生じています。

## エラー解消方法

ここまで分かれば、対処は簡単です。例えば、 `mux.Router` のルーティング時に `OPTINOS` を追加するのが一番単純でしょうか。後出しで申し訳ないですが、 [rs/cors](https://github.com/rs/cors) では、独自ヘッダを追加する場合、どのようなヘッダを許可するかを指定する必要があります。詳しくはREADMEを見てください。それを踏まえると、以下のような実装になります。

```Go
func main() {
  c := cors.New(cors.Options{
    AllowedOrigins: []string{"*"},
    AllowedMethods: []string{
      http.MethodHead,
      http.MethodGet,
      http.MethodPost,
    },
    AllowedHeaders:   []string{"*"},
    AllowCredentials: false,
  })
  logChain := alice.New(c.Handler, logHandler)
  authChain := logChain.Append(authHandler)
  r := mux.NewRouter()
  r.Methods("GET", "OPTIONS").Path("/pilot").Handler(authChain.Then(funcHandler{pilotFunc}))
  r.Methods("GET", "OPTIONS").Path("/angel").Handler(logChain.Then(funcHandler{angelFunc}))
  http.ListenAndServe(":8000", r)
}
```

<details>
<summary>全体のコード</summary>
<div>

```Go
package main

import (
  "encoding/json"
  "log"
  "net/http"

  "github.com/gorilla/mux"
  "github.com/justinas/alice"
  "github.com/rs/cors"
)

type Character struct {
  Name string `json:"name"`
}

type funcHandler struct {
  handler func(w http.ResponseWriter, r *http.Request)
}

func (h funcHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
  h.handler(w, r)
}

func pilotFunc(w http.ResponseWriter, r *http.Request) {
  res, _ := json.Marshal(Character{"Shinji"})
  w.WriteHeader(http.StatusOK)
  w.Write(res)
}

func angelFunc(w http.ResponseWriter, r *http.Request) {
  res, _ := json.Marshal(Character{"Adam"})
  w.WriteHeader(http.StatusOK)
  w.Write(res)
}

func logHandler(h http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    log.Printf("Method: %v; URL: %v; Protocol: %v", r.Method, r.URL, r.Proto)
    h.ServeHTTP(w, r)
  })
}

func authHandler(h http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    token := r.Header.Get("Token")
    if token == "" {
      w.WriteHeader(http.StatusUnauthorized)
      return
    }
    h.ServeHTTP(w, r)
  })
}

func main() {
  c := cors.New(cors.Options{
    AllowedOrigins: []string{"*"},
    AllowedMethods: []string{
      http.MethodHead,
      http.MethodGet,
      http.MethodPost,
    },
    AllowedHeaders:   []string{"*"},
    AllowCredentials: false,
  })
  logChain := alice.New(c.Handler, logHandler)
  authChain := logChain.Append(authHandler)
  r := mux.NewRouter()
  r.Methods("GET", "OPTIONS").Path("/pilot").Handler(authChain.Then(funcHandler{pilotFunc}))
  r.Methods("GET", "OPTIONS").Path("/angel").Handler(logChain.Then(funcHandler{angelFunc}))
  http.ListenAndServe(":8000", r)
}
```

</div>
</details>

もしくは、 `PathPrefix` を使って、 `OPTIONS` を全部処理する方法もあります。（この方法が良いかどうかはわからないです、すみません。）

```Go
func main() {
  c := cors.New(cors.Options{
    AllowedOrigins: []string{"*"},
    AllowedMethods: []string{
      http.MethodHead,
      http.MethodGet,
      http.MethodPost,
    },
    AllowedHeaders:   []string{"*"},
    AllowCredentials: false,
  })
  logChain := alice.New(c.Handler, logHandler)
  authChain := logChain.Append(authHandler)
  r := mux.NewRouter()
  r.Methods("OPTIONS").PathPrefix("/").HandlerFunc(c.HandlerFunc)
  r.Methods("GET").Path("/pilot").Handler(authChain.Then(funcHandler{pilotFunc}))
  r.Methods("GET").Path("/angel").Handler(logChain.Then(funcHandler{angelFunc}))
  http.ListenAndServe(":8000", r)
}
```

ちなみに、 `Pathprefix` はその名の通り、urlに共通の接頭辞をつけます。例えば、

```Go
r.PathPrefix("/products/")
```

と設定すると、 `http://localhost:8000/products/hoge`や`http://localhost:8000/products/fuga` といったリクエストが該当するようになります。

## 結論

CORSに対応したい場合は、ちゃんと `OPTIONS` に対応しましょう。


## 余談

長文読んでいただきありがとうございます。分かると、単純なことじゃないかという感じのハマりかたですが、もう一つハマりどころがあります。実は、スクラッチから書いた訳ではなく、他の人が書いてくれたものを変更しており、その過程でハマりました。他の人が書いてくれたコードというのが、

```Go
func main() {
  c := cors.New(cors.Options{
    AllowedOrigins: []string{"*"},
    AllowedMethods: []string{
      http.MethodHead,
      http.MethodGet,
      http.MethodPost,
    },
    AllowedHeaders:   []string{"*"},
    AllowCredentials: false,
  })
  logChain := alice.New(c.Handler, logHandler)
  authChain := logChain.Append(authHandler)
  r := mux.NewRouter()
  r.Methods("GET").Path("/pilot").Handler(authChain.Then(funcHandler{pilotFunc}))
  r.Methods("GET").Path("/angel").Handler(logChain.Then(funcHandler{angelFunc}))
  
  r.PathPrefix("").Handler(logChain.Then(http.StripPrefix("/img", http.FileServer(http.Dir("./img")))))  // これがあった。
  
  http.ListenAndServe(":8000", r)
}
```

というようなものでした。画像を返すために、 `r.PathPrefix("").Handler(logChain.Then(http.StripPrefix("/img", http.FileServer(http.Dir("./img")))))` というものがありました。しかし、自分のサーバーでは画像を返す機会がなかったため、この一行を削除しました。すると、いきなりCORSでエラーが発生しだし、panicでした。さらに、この一行を先頭に移動しても、エラーが生じました。しかし、なかなかエラーの原因を特定することができませんでした。

この記事を書いている時に知ったのですが、

> CORS は様々なエラーで失敗することがありますが、セキュリティ上の理由から、エラーについて JavaScript から知ることができないよう定められています。コードからはエラーが発生したということしか分かりません。何が悪かったのかを具体的に知ることができる唯一の方法は、ブラウザーのコンソールで詳細を見ることです。

とのことです。つまり、どのようなエラーが生じたとしても、

```js
Access to fetch at 'http://localhost:8000/pilot' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

が表示されます。これのせいでデバッグが困難になっていました。今になって思うと、chromeであればNetworkのタブから、4XXのエラーの種類を見て、どういうエラーがあり得るか推測できたのにな、と時間を無駄にしてしまった感が否めないです。実際、 `Pathprefix("")` を削除したときと、先頭に持って行ったときで、コンソールに表示されるエラーの文章は同じでしたが、ステータスはそれぞれ、405と404でした。

では、なぜ `r.PathPrefix("").Handler(logChain.Then(http.StripPrefix("/img", http.FileServer(http.Dir("./img")))))` が追加されているときは、エラーが生じなかったかというと、 `OPTIONS http://localhost:8000/pilot` というリクエストは、

```Go
r.Methods("GET").Path("/pilot").Handler(authChain.Then(funcHandler{pilotFunc}))
```

に対しては、Method Not Allowedエラーになるのですが、

```Go
r.PathPrefix("").Handler(logChain.Then(http.StripPrefix("/img", http.FileServer(http.Dir("./img")))))
```

に対しては、適合してしまうのです。実は、gorilla/muxで登録するパスは、正規表現に直されるのですが、 `PathPrefix` に空文字""を登録した場合、対応する正規表現は `"^"`となります。したがって、 `/pilot` は上記のルーティングに対して、Not Foundとならずに、処理が進んでしまいます。

また、メソッドが `OPTIONS`　だった場合、 rs/cors は即座に204 No Contentを返すため、その後の `http.StripPrefix("/img", http.FileServer(http.Dir("./img"))))` でエラーが生じるようなリクエストも通ってしまいます。そのため、画像を返すために設定したルーティングが、意図せずにCORSのエラーを回避するものとなっていたのです。


## 最後に

Go言語はシンプルなものを組み合わせる、という考え方がありますが、今回のgollira/mux、rs/cors、justinas/aliceについても、挙動を理解するために読むべきファイルの数が1つか2つであったため、処理を順に読み解いていくことが容易に行えました。この記事の説明では全てを完全には説明できていないと思うので、分からないことがあれば、それぞれの実装を自分の目で見ていただければと思います。