node/module/NestJS/tips/CORS対応 - 豚吐露＠wiki

CORS対応

CORS

CORS：Cross-Origin Resource Sharing
異なるOrigin間での通信を可能とさせる仕組み。

同一のOriginとは、プロトコル(スキーム)、ホスト(ドメイン)名、ポート番号が完全一致する間柄。
API Serverだけ別にしたりすると、ポート番号が異なったりして、異なるOriginになってしまい、通信できなくなる。
このとき、適切にCORSの設定を行うと通信をすることが可能になる。

対応

CORSはNestJS側(Server側)、Client側(ブラウザ側)両方での対応が必要。

server側

基本はコレ。

"src/main.ts"を開く。
bootstrapの中で、listenする前に

app.enableCors();

を実行。

もしくは、Factory.create時にoptionでcorsをtrueにする。

const app = await NestFactory.create(AppModule, { cors: true });

client側

client側でfetchするときに『mode: 'cors'』を指定。

fetch(url, {
  mode: 'cors'
}) 

https://fetch.spec.whatwg.org/#concept-request-mode
mode大事。same-origin、cors、no-corsが主に使うヤツかな？
他にも、websocket、navigateがあるが、とりあえず置いておく。

• no-cors

default値。未設定時はこの挙動。
基本的に、corsは認めないmode。 MDN：単純リクエスト のみcorsを許可する。
で、理解しないで使ってると...使いたいパターン。例えば

{metod:'POST', body: req_data, headers: new Headers({"Content-Type":"application/json"}) }

で、CORSしようとすると、POST自体は通るんじゃけど、Content-Typeが勝手に"plain/text"に変えられたりする。なので、bodyが空になっちゃって慌てる...
最初は、headerの指定方法がおかしいんかと思うとったが、犯人は『mode:'no-cors'』だったというオチ。
単純リクエストしかCORSしてくれないって所がミソ。
e.g.) 単純リクエスト

• cors

ちゃんとCORSしたいときのmode。
単純リクエストでないリクエストで、CORSしたいときは必ずこのmodeを選択する。
で、server側が対応出来とったらCORSできる。

• same-origin

単純リクエスト

以下のみCORS可能。

method	GET、HEAD、POST
設定可能なheader	Accept、Accept-Language、Content-Language、Range、Content-Type ただし、"Content-Type"には、"application/x-www-form-urlencoded"、"multipart/form-data"、"text/plain"のみ設定可能。 設定不可な値を設定すると強制的に"text/plain"に変えられる模様。

プリフライトリクエスト

CORSの環境が正しく作られているときにCORSな要求を出すと、本来の要求の前に'OPTION' methodの要求が飛ぶ。
MDN：CORS-プリフライトリクエスト
MDN：プリフライトリクエスト
これは、server側がCORSに対応しているか確認するための要求。
CORSを行うときに必ず行われるので、fetchしたときにOPTION methodの要求が飛ばなかったりしたら、CORSとして正しく動けてないということ。
ちなみに、server側がCORSに対応できてないと、プリフライトリクエストの段階で失敗する。

確認

ブラウザからNestJSに対して要求を出してみて、responseが帰ってきたら問題なし。
一応、↓のようなfileを作って接続testしてみてた。
cors_sample.html

---

更新日： 2023年10月10日 (火) 02時06分37秒