[컴][웹] CORS 설정 / 서버, client

Cross-Origin Resource Sharing /

CORS 설정 / 서버, client

• Fetch Standard

   +-----------------------+                                                            +-----------------------+
   |     [client]          |       withCredential : true                                |                       |
   |                       | +------------------------------------------------------->  |     [server]          |
   |                       | <--------------------------------------------------------  |                       |
   | http://localhost:8090 |    Access-Control-Allow-Origin: http://localhost:8090      |                       |
   |                       |    Access-Control-Allow-Credentials: true                  |                       |
   |                       |                                                            | http://localhost:8091 |
   +-----------------------+                                                            +-----------------------+                         

서버쪽 설정

spring 의 경우:

• CORS with Spring | Baeldung

// ref: https://www.baeldung.com/spring-cors#1-javaconfig
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
            .addMapping("/**")
            .allowedOrigins("http://localhost:8090")
            .allowCredentials(true)
            .allowedMethods("*");
    }
    ...
}

management.endpoints.web.cors.allowed-origins :

• Spring Boot enabling CORS by application.properties - Stack Overflow : actuator 의 cors 와 혼동하는 경우가 있다. actuator 의 cors 의 allowed-origins 를 추가한다고 해도, actuator url 외에도 적용되는 것은 아니다.

client code

withCredentials 가 set 돼야 credential 을 설정하는 cookie 나 credential 등이 request 시점에 같이 넘어가게 된다.

withCredential를 true로 set 하면, 다른 domain 으로 요청하는 request 에 cookie 가 설정되고, 그로 인해 응답을 받을때 3rd party cookie 들을 얻게 된다. 이렇게 얻은 cookie 들은 여전히 same-origin policy 를 유지한다. 그런 이유로 document.cookie 또는 ’response headers’로부터 접근할 수 없다.[see also. 2]

XMLHttpRequest

// ref: [XMLHttpRequest.withCredentials - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api', true);
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.addEventListener('load', function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('Error:', xhr.statusText);
  }
});

xhr.send();

fetch api

from, ref. 2

fetch("https://example.com", {
  credentials: "include",
  method: "POST", // or 'PUT'
  headers: {
    "Content-Type": "application/json",
  }
})
  .then((response) => response.json())
  .then((data) => {
    console.log("Success:", data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });
;

preflight

• Preflight request - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

cors 의 경우 preflight request 를 보내는 경우가 있다. 이것은 실제 request를 보내기전에 이제 보내려는 request 의 몇개 특징을 서버에게 보내서 서버에서 이런 request 를 처리해주느냐? 라고 묻는용으로 보내는 request 로 보면 될 듯 하다.

preflight request 가 발생되는 조건:

• Cross-Origin Resource Sharing (CORS) - HTTP | MDN : 자세한 조건은 이 글을 확인하자.
• request에 credential 이 있는 경우 preflight 이 날라간다.
• Content-Type 이 ‘application/x-www-form-urlencoded’, ‘multipart/form-data’, ’text/plain’외의 값이면 preflight request 가 날라간다.
• custom header 가 있다면 preflight request 가 날라간다.

preflight request가 발생하지 않는 경우:

• simple request | MDN에 해당한다면, preflight request 는 날라가지 않는다.

See Also

1. Cross-Origin Resource Sharing (CORS) - HTTP | MDN
2. XMLHttpRequest.withCredentials - Web APIs | MDN
3. 쿠...sal: [컴] 제 3자 쿠키란?