CORS(Cross-Origin Resource Share)

🔥 CORS 접근 제어 시나리오(CORS 동작 방식)

1) 프리플라이트 요청(Preflight Request)

프리플라이트 요청(Preflight Request)는 예비요청과 본요청으로 나누어 요청을 하는 방식입니다. 여기서 HTTP 메서드 중 option 메서드를 사용해서 다른 도메인 리소스 요청 가능한지 확인 후, 실제 요청을 전송합니다.

*OPTIONS Method
사전 요청을 보내 서버가 해당 파라미터를 포함한 요청을 보내도 되는지에 대한 응답

2) 단순 요청(Simple Request)

정식 명칭은 없지만, 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)
인증정보 포함 요청(Credentialed Request)는 인증 관련 헤더를 포함할 때 사용하는 요청을 말하는데요!

→ ex) XMLHttpRequest 객체나 fetch API 옵션에 사용(기본적으로 쿠기 정보나 인증 관련 헤더 x)

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

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

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

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