概要

サーバにリクエストを飛ばすと、レスポンスとして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での設定方法は以下になります。

LoginController.java

@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エラーに遭遇し、トラウマになっていました。
同じように困っている人のお役に立てれれば幸いです。