違うドメインを叩くときに躓いたのでメモ（自分用）

概要

JavaScriptアプリからSpringBoot*JAVAのアプリをコールしようとした。
fetchAPIを使用して試みたが、エラーで上手くApiをたたけず
status: 0 みたいなレスポンスが返ってきたので調べてみた

躓いた内容

fetch API を使用してJavaScriptからSpringBootのAPIをコールするときのHTTPリクエスト・レスポンス周り

詳細

コール元とコール先のドメインが異なることで、危険なリクエストと判断されて？エラーが帰っていた。
解決するには、認証の設定が必要。

調査した結果、
ヘッダの情報を元に安心なサイトからのリクエストなのかを認証？する必要があるらしい。
CORS(Cross-Origin Resource Sharing)というもの。

HTTP周りに詳しくないため、応急処置的な対応にはなったが、
リクエストを飛ばすフロントAppは、自己のドメインをリクエストヘッダに詰める必要があり
コールされるAPIはどのOriginからのリクエストを許可するか設定が必要だった。

• フロントの実装

headers: {
 "mode": "cors",
 "Origin": "http://localhost:9000"
}

• APIの実装

import org.springframework.web.bind.annotation.CrossOrigin;
@CrossOrigin

フロントの実装

今回フロントはJacaScriptでfetchApiを使用してAPIコールをした。
その際、fetchApiに渡すheadersに上記を追加する。
"mode"は別ドメインへのリクエストを表す（no-corsとかもあった）
"Origin"は自己のドメインをリクエスト先に伝えるために必要？

APIの実装

コールされるAPIはSpringBoot*JAVAで作成した。
@RestControllerクラスのMappingされるメソッドに
@CrossOriginアノテーションを付与する。
これはワイルドカードてきな物で、クロスドメインからのリクエストをすべて許可するらしい。
セキュリティ的に危ないので、細かく指定することも可能

まとめ

ひとまずは上記で解決し、Promiseでラップされたレスポンスを受け取ることができた。

以下参考にしたURL
https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34
https://ja.javascript.info/fetch-crossorigin
https://qiita.com/syukai/items/4e88749d1d62f1148e45
https://teratail.com/questions/144992
https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34