概要
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