89. (Http/fetch) fetch (페치) Web APi 요청 시 mode 옵션 설명 - 교차 출처 요청

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : fetch

 

---

[설 명]

 

// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[설 명]
// --------------------------------------------------------------------------------------

1. Fetch API 는 JavaScript 에서 접근하고 조작할 수 있는 인터페이스를 제공하는 Web Api 입니다.


2. Fetch API mode 옵션은 요청이 크로스 오리진으로 이루어질 수 있는지 여부를 설정하는 옵션입니다.


3. Fetch API mode [ cors ] 옵션 설정 값 : mode: "cors"

  >> 요청이 크로스 오리진인 경우 사용합니다 (도메인이 다름)

  >> 요청이 간단한 요청 인 경우 , 요청은 항상 전송되지만 서버는 올바른 Access-Control-Allow-Origin 헤더로 응답해야 하며 
     그렇지 않으면 브라우저가 호출자와 응답을 공유하지 않습니다

  >> 요청이 간단한 요청이 아닌 경우 브라우저는 서버가 CORS를 이해하고 요청을 허용하는지 확인하기 위해 사전 요청을 보내고 , 
     서버가 적절한 CORS 헤더와 함께 사전 요청에 응답하지 않는 한 실제 요청은 전송되지 않습니다.

  >> 타사 API 나 서버 의 데이터에 액세스 해야 하는 경우에는 사용할 수 있습니다


4. Fetch API mode [ same-origin ] 옵션 설정 값 : mode: "same-origin"

  >> 교차 출처 요청을 완전히 허용하지 않도록 설정합니다 (동일 도메인 요청)


5. Fetch API mode [ no-cors ] 옵션 설정 값 : mode: "no-cors"

  >> CORS를 비활성화합니다

  >> 설정할 수 있는 헤더를 제한하고, GET, HEAD, POST 메서드를 제한합니다

  >> 응답은 불투명 하여 헤더와 본문을 JavaScript에서 사용할 수 없습니다

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://blog.naver.com/kkh0977/223607046853

https://blog.naver.com/kkh0977/223595018272

// --------------------------------------------------------------------------------------
​

---