概要
サーバにリクエストを飛ばすと、レスポンスとして403エラーが返ってくるなんて経験ないでしょうか？
403エラーの原因の一つとしてCORSエラーというものがあります。
今回は備忘録も含めそのCORSの意味と解決方法を簡単にまとめてみました。
そもそもどんな時に発生するエラー？
主にクライアントからCORS許可の設定をしていないAPIを呼び出す際に起こるエラーです。
以下が、CORSエラーの例です。
オリジンとは
CORSを理解する上で、オリジンの意味を知っておくとイメージがつきやすいかと思います。
オリジンとはURLのスキーム（プロトコル）、ホスト（ドメイン）、ポートによって定義されます。
http://example.com：8080/app1/index.html の場合、以下のように分類できる。
・スキーム：http
・ホスト：example.com
・ポート：8080
-
同一オリジンの例
スキーム（http）及びホスト（example.com）が同一のものは同一オリジン
（例）
http://example.com/app1/index.html
http://example.com/app2/index.html -
異なるオリジンの例
スキーム（http）及びホスト（example.com）が異なるもの
（例1）スキームが異なる
http://example.com/app1
https://example.com/app2
（例2）ホストが異なる
http://example.com
http://www.example.com
（例3）ポートが異なる
http://example.com
http://example.com:8080
CORSとは
CORS(コルス)とは、Cross-Origin Resource Sharing（オリジン間リソース共有）の略で、あるオリジンで動作しているWEBアプリケーションから異なるオリジンで動作しているリソースへのアクセスを許可することを言います。
要するに、異なるオリジンで動いているリソースへの許可設定を行わないと、WEBアプリケーションからのアクセスを許可しないよ！というわけです。
私の場合、以下の構成でアプリケーションを開発していたため、ポートが異なることでCORSエラーに遭遇していました。。
トラウマです・・・。
フロントエンド：http://localhost:3000
バックエンド：http://localhost:8080
⇨同じローカル環境だけど、ポートが異なるためオリジンが異なる。
⇨CORSの対象になる！
原因
では、原因は一体なんでしょうか。
実際のエラーを見てみると・・・
エラー内容としては、Access-Control-Allow-Originのヘッダーがないよ〜と書いてあります。
そこで、レスポンスヘッダーを開発者ツールのネットワークタブで確認してみると・・・
たしかに記載の通りAccess-Control-Allow-Originヘッダーがない・・・！
つまり、レスポンスヘッダーにAccess-Control-Allow-Originを設定してあげればよいということになります！
解決方法
原因がわかったので、レスポンスヘッダーに対してAccess-Control-Allow-Originを設定するように呼び出し先のAPIに適宜記述すればOK。
私の場合、ReactとSpringBootでの開発のため今回はSpringBootでの設定方法を紹介します。
SpringBootでの設定方法は以下になります。
@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/api/login")
public class LoginController {
@Autowired
private LoginService loginService;
/**
* Initialize.
*
* @return
*/
@GetMapping
public ResponseEntity<LoginResponseDto> init() {
try {
return ResponseEntity.ok(loginService.init());
} catch (Exception e) {
return new ResponseEntity<>(HttpStatus.CONFLICT);
}
}
}
上記ソースはAPIのコントローラ部分の記載になります。
@crossOriginに対しhttp://localhost:3000を設定することで、APIとしてはhttp://localhost:3000からのアクセスを許可しますよという意味のレスポンスヘッダー（Access-Control-Allow-Origin）を返すことになります。
これで、http://localhost:3000からhttp://localhost:8080のリソースへのアクセスを許可する設定ができ、CORSエラーも解決できました！
CORSの設定は他にも、設定ファイル等で行うこともできますが、CrossOrignアノテーションでCORS設定をする方法が一番シンプルだと思います。
まとめ
今回はCORSについてその意味と解決方法をみてきました。
私自身、ローカルで開発していた際にポートが異なっていたためCORSエラーに遭遇し、トラウマになっていました。
同じように困っている人のお役に立てれれば幸いです。