Hello, Freakin world!

[Web] CORS 해결하기 - 3. Reqeusts with credentials 본문

Web

[Web] CORS 해결하기 - 3. Reqeusts with credentials

johnna_endure 2019. 12. 5. 20:12
  1. Simple requests
  2. Preflighted reqeuests
  3. Reqeusts with credentials

Reqeusts with credentials에 대한 CORS

credential을 포함한 요청이란?

쉽게 말하자면 HTTP Cookies 나 HTTP Authentication 정보를 가지는 요청을 말한다.
기본적으로 XMLHttpRequest 나 Fetch 호출에서 브라우저는 credential 정보를 전달하지 않는다.
만약 XMLHttpRequest 객체에서 그런 요청을 보내고 싶다면 특별한 플래그를 추가해야 된다.

예제 시나리오

간단한 쿠키를 자바스크립트에서 생성해 GET 요청에 포함한다.
요청은 외부 origin인 localhost:8080/cookie로 보내고, 서버는 받은 쿠키값에 해당하는 value 값을 읽고 그대로 response body에 추가한다. 그리고 응답으로 받은 value 값을 화면으로 마지막에 출력한다.

예제 코드

document.addEventListener('DOMContentLoaded', function () {
    let result = document.getElementById('result');
    let url = 'http://localhost:8080/cookie';

    //쿠키 설정
    document.cookie = 'name=choi; Path=/javascriptTutorial; Domain=localhost';

    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.withCredentials = true;
    xhr.onload = function(){
        console.log(xhr.response);
    };
    xhr.send();
}, false);


위 코드에서 눈여겨볼 점이라면 withCredentials에 true 값을 할당한 점이다. 이 값을 설정하지 않으면 xhr은 기본적으로 credential 정보를 보내지 않는다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="propagation.js"></script>
</head>
<body>
<div id="result">
</div>
</body>
</html>

 

  @GetMapping("/cookie")
    public String getCookie(@CookieValue(name="name") String name){
        return name;
    }


위 코드는 /cookie URL에 대한 핸들러 코드다.

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/cookie")
                .allowedOrigins("http://localhost:63342")
                .allowedMethods("POST", "OPTIONS","GET")
                .allowCredentials(true).maxAge(5);
    }
}

 

credential Cross domain 요청에 대한 응답을 받기 위해서는 특별한 헤더가 필요하다.
클라이언트 쪽이 아니라 서버 쪽에서 해당 URL에 대한 응답에 Access-Control-Allow-Credentials 헤더에 true값을 포함하고 있어야한다. 만약 이 값이 true 값이 아니라면 응답은 무시된다.

응답 헤더. 

 

 

주의할 점!

크레덴셜 요청을 보낼 때, Access ... origin 헤더는 '*'와 같이 와일드 카드로 설정할 수 없다.
정확한 도메인 명을 명시해야 한다.

'Web' 카테고리의 다른 글

[HTML] onload 이벤트  (0) 2021.07.15
REST에 대한 정리글 [로이 필딩 논문을 훑어본 뒤...]  (0) 2021.05.03
진짜 RESTful API에 대해서  (0) 2020.07.06
서브넷 마스크 계산하기 참고글  (0) 2020.05.18
ip에 대해서 설명 잘된 사이트 참고  (0) 2020.05.18
'Web' Related Articles more
Comments