[오류 해결] 401 Unauthorized 해결

문제 상황

local에서 편하게 개발하기 위해 dev server를 따로 배포해서 사용하고 있음.
로그인을 구현하는데 애플리케이션 탭에는 cookie가 담기는데,
요청 header에는 Cookie가 담기지 않는 문제 발생함.

각자 시도한 방법

[프론트에서 시도한 방법]

1. certbot으로 pem key 발급받고 custom server에서 https 적용시켜줌

// server.js
const http = require('http');
const https = require('https');
const { parse } = require('url');
const fs = require('fs');

const next = require('next');

const dev = process.env.NEXT_PUBLIC_ENV !== 'production';
const PORT = 3000;

const app = next({ dev });

const handle = app.getRequestHandler();

const httpsOptions = {
  key: fs.readFileSync('./key.pem'),
  cert: fs.readFileSync('./cert.pem'),
};

app.prepare().then(() => {
  /* http 서버 실행 */
  http
    .createServer((req, res) => {
      const parsedUrl = parse(req.url, true);
      handle(req, res, parsedUrl);
    })
    .listen(PORT + 1, err => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${PORT + 1}`);
    });

  /* https 서버 실행 */
  https
    .createServer(httpsOptions, (req, res) => {
      const parsedUrl = parse(req.url, true);
      handle(req, res, parsedUrl);
    })
    .listen(PORT, err => {
      if (err) throw err;
      console.log(`> HTTPS: Ready on https://localhost:${PORT}`);
    });
});

// package.json

/* ... */
 "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "prestart": "pnpm run build",
    "start": "next build & next start -p 80",
    
/* ... */

2. axios withCredentials: true 적용

export const privateApi = new HttpClient({
  baseURL: `${BASE_URL}`,
  headers: {
    'Content-Type': 'application/json',
  },
  withCredentials: true,
  withXSRFToken: true,
});

[백엔드에서 시도한 방법]

1. sameSite, secure strict설정 풀었음
2. cors 설정 https://localhost:3000추가해줬음

그럼에도 불구하고 401error가 계속나고..

결국 해결!

문제는 서버에서 쿠기 설정을 할 때 'SameSite'라는 옵션을 'none'으로 해줘야
다른 도메인에서도 쿠키 전달이 가능한 것은 알고 있다.

근데 여기서 더 중요한 것은

"SameSite"를 "none"으로 설정하면,
"Secure"옵션을 "True"로 설정해야 한다는 것이다.

이는 쿠키가 HTTPs연결을 통해서만 전송되도록 보장해준다..

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Set-Cookie#none

오예 담긴다!