투케이2K

60. (Http/axios) [간단 소스] 액시오스 http 요청 수행 시 withCredentials (인증 정보) , crossDomain (크로스 도메인) 설정 수행 본문

Http & Api

60. (Http/axios) [간단 소스] 액시오스 http 요청 수행 시 withCredentials (인증 정보) , crossDomain (크로스 도메인) 설정 수행

투케이2K 2023. 9. 15. 21:27
반응형

[개발 환경 설정]

개발 툴 : Edit++

개발 기술 : Axios

 

[소스 코드]

 

/**
-------------------------------------------------------
[요약 설명]
-------------------------------------------------------
1. withCredentials : 서로 다른 도메인 (크로스 도메인) 에 요청을 보낼 때 요청에 credential 정보를 담아서 보낼 지를 결정하는 항목
-------------------------------------------------------
2. credential 정보가 포함되어 있는 요청 종류 [클라이언트] : 
  - 쿠키를 첨부해서 보내는 요청
  - 헤더에 Authorization 항목이 있는 요청
-------------------------------------------------------
3. 서버 입장에 credential 요청 처리 방법 : 

  - 응답 헤더의 Access-Control-Allow-Credentials 항목을 true 로 설정해야 합니다
  - 응답 헤더의 Access-Control-Allow-Origin 의 값이 반드시 설정되어야 합니다. 단 와일드카드 문자("*")는 사용할 수 없습니다.
  - 응답 헤더의 Access-Control-Allow-Methods 의 값을 지정해야 할 경우 와일드카드 문자("*")는 사용할 수 없습니다.
  - 응답 헤더의 Access-Control-Allow-Headers 의 값을 지정해야 할 경우 와일드카드 문자("*")는 사용할 수 없습니다.
  - 유의 사항으로 Access-Control-Allow-* 헤더 값들을 지정해야 하는 경우에는, 와일드카드 문자를 제외한 값으로 설정되어야 합니다.
-------------------------------------------------------
*/


            // [axios 요청 수행 실시]
            axios({
                method: "PATCH", // [요청 타입]
                url: REQ_URL, // [요청 주소]
                data: JSON.stringify(REQ_PARAM), // [요청 데이터]
                headers: {"Content-Type" : "application/json; charset=UTF-8"}, // [요청 헤더]

                withCredentials: true, // [credential 정보 전달 여부]
                crossDomain: true, // [크로스 도메인 설정]

                timeout: 5000 // [타임 아웃 시간]
            })
            .then(function(response) {
                console.log("");
                console.log("=========================================");
                console.log("RESPONSE : " + JSON.stringify(response.data));
                console.log("=========================================");
                console.log("");
            })
            .catch(function(error) {
                console.log("");
                console.log("=========================================");
                console.log("ERROR : " + JSON.stringify(error));
                console.log("=========================================");
                console.log("");
            });

반응형
Comments