CORS(Cross-Origin Resource Share)

今日は先端開発の過程で、少なくとも1回遭遇したCORS問題を詳しく理解します!
開発中に以下の情報に遭遇したことがありますか?

私も何度も同じ問題を経験しましたが、最初はどうすればいいか分からなかったので、バックエンドの開発者に話しました.今日はフロントで問題が発生したときにどのように解決するかを整理したいです.

💡 CORS(Cross-Origin Resource Share)

CORSは교차 출처 리소스 공유!より具体的な定義は以下のようにすることができる.ここで、ソースはprotocol、host、portからなる.
追加のHTTPヘッダ通知ブラウザを使用して、あるソースで実行されるWebアプリケーションが別のソースの選択されたリソースにアクセスできるようにするメカニズム.
MDN：ソース間共有リソース（CORS）

🔥 CORSアクセス制御方式

1)フリーフライトのリクエスト(Preflight Request)프리플라이트 요청(Preflight Request)は、代替要求と本要求に分けられる.ここで、HTTPメソッドのoptionメソッドを使用して、他のドメインリソースを要求し、実際の要求を送信できるかどうかを検証する.
*OPTIONS Method
サーバがパラメータを含むリクエストを送信できるかどうかに応答するためにプリリクエストを送信する
2)簡単な要求
正式名称はありませんが、MDNのCORS文書を参考にしてSimple Requestにまとめました.단순 요청(Simple Request)は、プリフェッチ要求と同様であるが、代替要求が存在しないことを区別する.
また、以下の要求条件を満たす場合のみ、単純な要求(代替要求をスキップ)を行うことができます!
*条件

`GET` `POST` `HEAD` 중 하나의 메서드

`Accept` `Accept-Language` `Content-Language` `Content-Type` HEADER 만 허용

`application/x-www-form-urlencoded` `multipart/form-data` 
`text/plain` Content-Type 만 허용

3)要求は認証情報を含む인증정보 포함 요청(Credentialed Request)とは、認証関連ヘッダが含まれている場合に使用されるリクエストです!
→ex)XMLHttpRequestオブジェクトまたはfetch APIオプション(デフォルトではクッキー情報または認証に関連するタイトルx)に使用

creditionals : 'omit'; // 쿠키 전송 x
creditionals : 'same-origin'; // 동일 출처라면 user creditionals 전송 O
creditionals : 'incldue'; // cross-origin이라도 user creditionals 전송 O

🔥 CORSの解決方法

1)Access-Control-Allow-Origin応答ヘッダの設定

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: "https://velog.io/@shyunju7"

2)webpack-dev-serverにproxyを設ける🔥
→ webpack.configファイルでproxyを設定できます!

devServer: {
    proxy: {
      "/api“: {
        target: “http://localhost:8080”,
        changeOrigin: true,
      },
    },
  },

3) package.jsonにproxyを設定🔥
CRAによって生成されたプロジェクトでパッケージ化されます.jsonでproxyを設定する方法.

{
  "name": "my-blog",
  "version": "0.1.0",
  "proxy" : "https://velog.io/@shyunju7"
  
  .
  .
  .
}