Cross-Origin Resource Sharing /
CORS 설정 / 서버, client
+-----------------------+ +-----------------------+
| [client] | withCredential : true | |
| | +-------------------------------------------------------> | [server] |
| | <-------------------------------------------------------- | |
| http://localhost:8090 | Access-Control-Allow-Origin: http://localhost:8090 | |
| | Access-Control-Allow-Credentials: true | |
| | | http://localhost:8091 |
+-----------------------+ +-----------------------+ 서버쪽 설정
spring 의 경우:
// 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
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 는 날라가지 않는다.
