connect-webを試そうとしたらCORSまわりでちょっとはまった話

2022-08-20T12:35:05+09:00

背景

gRPCがフロントエンド通信の第一の選択肢になる時代がやってきたかも？ | フューチャー技術ブログを読んで、「HTTP/1.1で動いてcurlで投げたJSONも処理できるgRPC（もどき）って最強じゃん！」と思ったのでチュートリアルを試してみた。

connect-go のほうのチュートリアルは自分で書いたprotocol bufferからサーバーとクライアントを両方作る方法の解説だったのだけれど、connect-web のほうのチュートリアルは既存のWebサービスにつなぐためのクライアントの作り方の解説であったため、チュートリアルを参考にしつつ connect-go で作ったサーバーに接続する connect-web のクライアントを作ろうとした。

本文

やろうとしたこと

まずは Getting started | Connect のPrepareの節を行い、プロジェクトをつくる。

次に、protocol bufferからTypeScriptのコードを生成。Generating code | Connect にある通りの buf.gen.yaml を作った後、

ln -s ../connect-go-example/greet greet
buf generate

で gen 以下にTypeScriptのコードを生成する。

そして、App.tsx を以下のようにした。

import {
  createConnectTransport,
  createPromiseClient,
} from "@bufbuild/connect-web";
import React, { useState } from "react";
import { GreetService } from "../gen/greet/v1/greet_connectweb";
import './App.css'

const transport = createConnectTransport({
  baseUrl: "http://localhost:8080",
})

const client = createPromiseClient(GreetService, transport)

function App() {
  const [userName, setUserName] = useState("");
  const [message, setMessage] = useState("ここにメッセージが入ります");
  const sendName = async (e: React.FormEvent) => {
    e.preventDefault();
    const res = await client.greet({
      name: userName,
    })
    setMessage(res.greeting)
  }
  return (
    
      {message}
      
         setUserName(e.target.value)} />
        
      
    
  )
}

export default App

これで npm run dev して表示されたブラウザで「送信」ボタンを押すといいかんじに名前が表示されるはず……だが、何も出ない。ブラウザの開発者コンソールを見ると、405 Method Not Allowed のエラーが返ってきている。

原因

このエラーの意味は「POSTしか受け付けないサーバーにOPTIONSのリクエストを送っている」というものである。が、OPTIONSなんて聞いたこともないようなHTTPリクエストを送っているつもりはない。それでしばらく調べたのだが、これはCORSプリフライトというやつらしい。「単純リクエスト」以外のリクエストを送りたい時は予めOPTIONSで宛先サーバーの様子を調べるのである。

オリジン間リソース共有 (CORS) - HTTP | MDN

対処

というわけで、このOPTIONSをちゃんと処理できるような処理をサーバー側に足せば良いということになる。Goの net/http の場合は rs/cors: Go net/http configurable handler to handle CORS requests という定番ライブラリがあるようなので、これを噛ませてみることにする。

package main

import (
    "context"
    greetv1 "example/gen/greet/v1"
    "example/gen/greet/v1/greetv1connect"
    "fmt"
    "log"
    "net/http"

    "golang.org/x/net/http2"
    "golang.org/x/net/http2/h2c"

    "github.com/bufbuild/connect-go"
    "github.com/rs/cors"
)

type GreetServer struct{}

func (s *GreetServer) Greet(
    ctx context.Context,
    req *connect.Request[greetv1.GreetRequest],
) (*connect.Response[greetv1.GreetResponse], error) {
    log.Println("Request headers: ", req.Header())
    res := connect.NewResponse(&greetv1.GreetResponse{
        Greeting: fmt.Sprintf("Hello, %s!", req.Msg.Name),
    })
    res.Header().Set("Greet-Version", "v1")
    return res, nil
}

func main() {
    greeter := &GreetServer{}
    mux := http.NewServeMux()
    path, handler := greetv1connect.NewGreetServiceHandler(greeter)
    mux.Handle(path, handler)
    corsHandler := cors.Default().Handler(h2c.NewHandler(mux, &http2.Server{})) // corsのハンドラを追加した
    // corsHandler := h2c.NewHandler(mux, &http2.Server{}) // もとの実装はこれ
    http.ListenAndServe(
        "localhost:8080",
        corsHandler,
    )
}

これでサーバーを立て直すと、無事リクエストが処理されるようになった。

感想

Connect自体とは関係ない現代の基本的なWeb技術のところではまってしまった。そろそろちゃんとCORSを理解しないといけないと思った。

「Connect」の記事 - Crieit

connect-webを試そうとしたらCORSまわりでちょっとはまった話

背景

本文

やろうとしたこと

原因

対処

感想