本記事は以下リポジトリを参考にしています。
開発環境
# ホスト > docker --version Docker version 20.10.8, build 3967b7d > docker-compose --version docker-compose version 1.29.2, build 5becea4c # コンテナ /go/src # go version go version go1.17.6 linux/amd64
作ったもの
左のエディタにクエリを書いてRunボタン押下で右にレスポンスが表示される。
コード
以下躓いたところまとめ。
error: blocked by CORS policy
Access to fetch at '{endpoint}' from origin 'http://localhost:8081' 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.
localhost間で通信した際に上記エラーがconsole上に表示された。
CORS とは？
オリジン間リソース共有。
上記を読んだ理解だと、今回はバックエンドとフロントエンドをそれぞれ別のIP上で動かしているため、オリジン間リクエストとして判定され、CORSで制御されたみたい。
バックエンドとフロントエンドはそれぞれlocalhostの別々のポートにバインドさせているが、それぞれのコンテナが立ち上がっているIPが異なるので制御されたのかな。ここ理解が曖昧。
ポートが異なると異なるオリジンとして判別される。
下記内容に従ったらエラーは解消されたが、まだ理解できてないので今後の課題とする。
preタグ
GraphQLのレスポンス（JSON）をHTML上でインデント付与して見やすくしたい場合は値更新先をpreタグにすればOK。
preはpreformattedの略。
