ajax 호출 시 Access-Control-Allow-Origin과 cookie

Access-Control-Allow-Origin response header는 서버 응답이 주어진 origin에 공유될 수 있는지 지시해줌.

play에서는 개발 시 vue와 같은 별도의 FE 호출을 받도록 다음과 같이 설정해줌.

  cors { allowedOrigins = ["http://localhost:8080", "http://localhost:9000"] 

          allowedHttpMethods = ["GET", "POST", "PUT"]

methods에 POST를 포함시켜야 POST 호출을 받을 수 있음.

FE에서 호출 시에는 credential을 포함시켜야 cookie가 포함되서 서버에 들어온다.

서버에서 JWT(java web token)을 사용하는 경우 cookie가 들어와야 제 역할을 한다.

FE에서 fetch API를 쓸 때에는 다음과 같이 호출해야 쿠키가 포함된다.

fetch('/yyy/xxx', {

method: 'post',

credentials: 'include',

headers: {

'Csrf-Token': token

}

'include'로 하면 origin이 달라도 쿠키가 포함되며, 이를 'same-origin'으로 바꾸면 포트를 포함한 호스트가 같아야 API가 쿠키를 같이 보낸다.

axios는 기본이 same-origin인듯 하다.