ページをリロードするとCORSエラーが発生してしまう

Question

前提・実現したいこと

下記サイトを参考に、SpringBoot2とReactを使用したシングルアプリケーションを作成する勉強をしています。

JWT認証を利用したログイン処理後のページ遷移時と画面上のメニューリンクをクリックしたサーバサイドへのリクエストは正常に通るのですが、
F5ボタンによるリロードを行うと下記のようなCORSエラーが発生します。

どんな操作によるリクエストでも常に一貫して同じエラーが発生するなら分かりますが、
ページ更新によるリロードでのみエラーが発生するので原因が掴めずにいます。

原因や解決法が分かる方、ご教示の程よろしくお願い致します。

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'http://localhost:8080/instructors/in28minutes/courses' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET http://localhost:8080/instructors/in28minutes/courses net::ERR_FAILED

createError.js:17 Uncaught (in promise) Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:87)

該当のソースコード

参考サイト：https://dzone.com/articles/integrating-spring-boot-and-react-with-spring-secu-1

Comments

[wyq2020]

https://webpack.js.org/configuration/dev-server/#devserverproxy

[syachiku]

Create-React-Appで作成していますが、package.jsonファイル内でproxyの設定はしています。
質問内容は認証処理が正常に終わりページ遷移等の操作も正常に動作しているのに、1度リロードを行うとCORSエラーが発生してしまうことについてです。

[wyq2020]

@CrossOrigin(origins = { "http://localhost:3000", "http://localhost:4200" }) // <- これをわすれたでしょか？
@RestController
public class CourseResource {
}

[syachiku]

@CrossOriginアノテーションも付与しています。
念のため@CrossOrigin(origins = "*")としてみましたがダメでした。

Answer 1

参考サイト：https://dzone.com/articles/integrating-spring-boot-and-react-with-spring-secu-1

この参考サイトにも Step 5の導入説明として

If you refresh the course listing page, you should see another error.

でこのエラーが出るでしょ？ って書かれてますので、 Step5 以降を実装しなければ、エラーが出るのは想定どおりです。
CORS のプリフライトリクエストを許可するためにStep 5 を実装してください。