localhostとCORS

確かにlocalで立ち上げたserverからならCORSを無視してfetchできますが、http://localhost に接続して開いたweb pageからは不可能ですtakker.icon

serverではなくclient経由でfetchしている

localで立ち上げたserverにアクセスする＝http://localhost に接続する、だと思ってますsta.icon

http://localhost にアクセスする以外の「localで立ち上げたserverにアクセスする」方法がある？

たぶん下図で解説されてそうですが、まだピンと来てないのであとでじっくり

理解した！

Scrapbox.ioとの通信を「serverから行うか」「（serverから転送したassetsを使ってる）browserから行うか」の違いか

前者はいける（ローカルPCからcurl叩いたりするのと一緒）

後者はいけない（Scrapbox.ioが from localhost をガードしている）

https://kakeru.app/a007df0dbbf2a7c1ae4d4e364b4efd28 https://i.kakeru.app/a007df0dbbf2a7c1ae4d4e364b4efd28.svg

nishio.icon既にかなり説明されてた

こういうことをしたのです

https://gyazo.com/2dba023d5006b6d506f526d52bd3b7d2

これはlocalhost:5001で動かしているローカルサーバーに対して regroup-d4932/us-central1/get_scrapbox_page をリクエストしているだけ

Cloud Functionは前半ではlocalhost:5001の開発サーバで動いていて、後半ではcloudfunctions.netにデプロイされてます

なので、下記をScrapbox以外のオリジンを開いてるブラウザ上で実行してもScrapbox APIの結果が得られるわけです(明示的に書いてなかったので今加筆した)

code:ts

method: "post",

body: JSON.stringify({

}),

})

.then((x) => x.json())

.then((x) => console.log(x));

ガンガン使われて課金が来ると困るけどちょだと試してみる分には上記のCloud Functionを使ってみてもいいですよ

ありがとうございます。CORS周り全然わからないのですごく勉強になりました。お試しは……迷惑かけるの怖いので自分の方で試してみることにします（Firebase未経験ですし）sta.icon

ちなみにこのコードはweb page自体がus-central1-regroup-d4932.cloudfunctions.netへの通信を許可していない限り実行する事ができませんtakker.icon

server→clientで許可が降りていても(CORSが許可されていても)、client→serverの段階で止められてしまったら(CSPが許可されていなかったら)通信しようがない

実際、scrapbox.io上でこのコードを実行するとエラーがでます

……の、はずなのですが何故かFirefoxでは通ってしまう！

FirefoxのCSPガバガバ説の証拠が増えたぞ！()takker.icon

これ明らかにバグですよね……Mozillaに報告したほうが良いのかな……？