豚吐露@wiki
CORS対応
最終更新:
ohden
-
view
CORS対応
CORS
CORS:Cross-Origin Resource Sharing
異なるOrigin間での通信を可能とさせる仕組み。
異なるOrigin間での通信を可能とさせる仕組み。
同一のOriginとは、プロトコル(スキーム)、ホスト(ドメイン)名、ポート番号が完全一致する間柄。
API Serverだけ別にしたりすると、ポート番号が異なったりして、異なるOriginになってしまい、通信できなくなる。
このとき、適切にCORSの設定を行うと通信をすることが可能になる。
API Serverだけ別にしたりすると、ポート番号が異なったりして、異なるOriginになってしまい、通信できなくなる。
このとき、適切にCORSの設定を行うと通信をすることが可能になる。
対応
CORSはNestJS側(Server側)、Client側(ブラウザ側)両方での対応が必要。
server側
"src/main.ts"を開く。
bootstrapの中で、listenする前に
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があるが、とりあえず置いておく。
mode大事。same-origin、cors、no-corsが主に使うヤツかな?
他にも、websocket、navigateがあるが、とりあえず置いておく。
- no-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.) 単純リクエスト
最初は、headerの指定方法がおかしいんかと思うとったが、犯人は『mode:'no-cors'』だったというオチ。
単純リクエストしかCORSしてくれないって所がミソ。
e.g.) 単純リクエスト
- cors
ちゃんとCORSしたいときのmode。
単純リクエストでないリクエストで、CORSしたいときは必ずこのmodeを選択する。
で、server側が対応出来とったらCORSできる。
単純リクエストでないリクエストで、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に対応できてないと、プリフライトリクエストの段階で失敗する。
MDN:CORS-プリフライトリクエスト
MDN:プリフライトリクエスト
これは、server側がCORSに対応しているか確認するための要求。
CORSを行うときに必ず行われるので、fetchしたときにOPTION methodの要求が飛ばなかったりしたら、CORSとして正しく動けてないということ。
ちなみに、server側がCORSに対応できてないと、プリフライトリクエストの段階で失敗する。
確認
更新日: 2023年10月10日 (火) 02時06分37秒
添付ファイル