Zenn
Open4

CORSヘッダー付けられないGASのAPIをフロントから叩く｜創発遊戯第一回で使ったもの

GAS
Cloudflare Workers
Bun
Hono
shuyin02shuyin02

結論

GASのHTTPレスポンスにはCORS許可するヘッダーをセットできない
（できるのかもしれないけどそれっぽいことはドキュメントに記述なかったし記事も見当たらない）

GASでつくったAPIをフロントから叩くためには中継するAPIを立てるとよい

その手段としてCloudflare Workers + honoの組み合わせは快適かつ速度も十分だった

shuyin02shuyin02

Cloudflare Workersの準備

https://zenn.dev/watsuyo_2/scraps/76e60a75ada45e

こちらのスクラップが非常にわかりやすいのでこの通り実施します

  • Bunのインストールが面倒であればnpmでもよいですが、Bunは早くて簡単なので使ってみてほしいです
  • 途中にあるhttps://zenn.dev/link/comments/7f97b112d37053 この部分だけ、wrangler dev（実際に打ち込むコマンドはbun run start）したときに表示されたcompatibility_dateに書き換えが必要です
shuyin02shuyin02

index.tsの書き換えてPOSTに対するオウム返しAPIをつくる

import { Hono } from 'hono'
import { cors } from 'hono/cors'
const app = new Hono()

app.use('/api/*', cors())
app.get('/', (c) => c.text('Hello Cloudflare Workers!'))
app.post(
  '/api/v1',
  async (c) => {
    const post = await c.req.json<POSTリクエストの型>();
    return c.json(post);
  }
)

export default app

これをコピペして編集してみてください。
フロントからこのAPIにPOSTリクエストを送って、送ったリクエストと同じデータが返ってくれば成功です。
驚くほど早くデータが返ってきて、驚くと思います

送り先はhttps://cloudflare-workers-with-hono-on-bun.****.workers.devこんな感じのURLのはずです。

リクエストの型

フロントから

{
  message: 'test_message',
}

こんな感じのJSONを送っている場合、

const post = await c.req.json<{ message: string }>();

こんな感じです

shuyin02shuyin02

index.tsを書き換えて実際のAPIをたたく

import { Hono } from 'hono'
import { cors } from 'hono/cors'
const app = new Hono()

app.use('/api/*', cors())
app.get('/', (c) => c.text('Hello Cloudflare Workers!'))
app.post(
  '/api/v1',
  async (c) => {
    const post = await c.req.json<{ message: string }>();
    const res = await fetch('<API_ENDPOINTにかきかえ>', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(post)
    })
    const data = await res.json();
    return c.json(data);
  }
)

export default app

このように書き換えて、実際にフロントから叩きたいAPIを叩いてみましょう。
再度、フロントからこのAPIにPOSTリクエストを送ると、このAPI経由で指定したAPIを叩き、返ってきたデータをフロント側に送信してくれるので、結果的にフロントでデータを取得できるはずです