https localhost 주소에서 Set-Cookie가 되지 않는 문제, webpack-devServer host 설정

 

리프레시 토큰이 제대로 들어오는 지 확인하고 싶어서 localhost를 https로 변경했는데 여전히 Set-Cookie가 되지 않는 문제가 있었습니다.

 

 

domain=DOMAIN_NAME
When searching the cookie list for valid cookies, a comparison of the domain attributes of the cookie is made with the Internet domain name of the host from which the URL will be fetched. If there is a tail match, then the cookie will go through path matching to see if it should be sent. "Tail matching" means that domain attribute is matched against the tail of the fully qualified domain name of the host. A domain attribute of "acme.com" would match host names "anvil.acme.com" as well as "shipping.crate.acme.com".Only hosts within the specified domain can set a cookie for a domain and domains must have at least two (2) or three (3) periods in them to prevent domains of the form: ".com", ".edu", and "va.us". Any domain that fails within one of the seven special top level domains listed below only require two periods. Any other domain requires at least three. The seven special top level domains are: "COM", "EDU", "NET", "ORG", "GOV", "MIL", and "INT".

 

알아보니 도메인 주소에 .이 2개 붙어있거나, "COM", "EDU", "NET", "ORG", "GOV", "MIL", and "INT". 인 경우에  Set-Cookie 설정이 가능하다고 합니다

 

이것을 가능하게 하기 위해서 webpack-devServer에서 설정을 통해 할 수 있는데요

 

const { merge } = require('webpack-merge');

const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development', // 현재 개발 모드
  devtool: 'eval', // 최대성능, 개발환경에 추천
  devServer: {
    historyApiFallback: true,
    port: 3000,
    hot: true,
    host: 'localhost.specialurl.com', // << 여기에서 주소명을 변경할 수 있습니다
    server: {
      type: 'https',
      options: {
        key: './localhost.specialurl.com-key.pem',
        cert: './localhost.specialurl.com.pem',
      },
    },
  },
});

 

 

그리고 위의 첨부한 localhost에서 https 설정하기를 하신다면 사용이 가능하게 됩니다

 

webpack devServer을 이용해 localhost https 설정하기

 

mkcert localhost.specialurl.com

 

 

 

 

 

접속이 가능한 모습

 

저의 경우 너무 백엔드와 ngnix에서 제가 커스텀한 url을 허용해달라고 요청하는 것이  번거로워서 개발 서버로 가서 확인하였으나 필요할 때가 있을 것 같아 정리해두었습니다 

 

참고 자료

 

Cookies on localhost with explicit domain

 

Client Side State - HTTP Cookies

 

DevServer | 웹팩