[Next.js] 멀티 Origin 허용을 위한 middleware 적용 #백엔드배워보기 #TIL - 06.19

 

06/19

---

포트폴리오 사이트 수정을 하고있습니다.

CORS 관련으로 깊게 찾아봤습니다.

 

표준 HTTP 사양에 맞게 서버와 클라이언트가 어떻게 통신을 해야 보안상 안전한지 깊게 알 수 있었습니다.

멀티 Origin 허용을 위해 next.config.js에서 적용했다가 표준 HTTP 사양에선 하나의 origin만 허용하기 때문에 middleware을 적용하였습니다.

 

Suspense 에 깊게 알아봤습니다. suspense: true 속성을 주지 않았음에도 처음에 suspense가 작동한 것을 보니, 음... 조금 연구해볼 필요가 있습니다. 데이터 패칭을 확인했음에도 Skeleton이 작동하지 않습니다. 이와 관련된걸로 추측하고 있습니다.

 

 

오늘의 한 일

Frontend

• [x] solid.js QueryClient 세팅 오류?
  • [x] ky 라이브러리의 api 호출의 문제였음! input에 /가 없어야한다.
• [x] lint-stage로 인해 쌓아둔 커밋 정리해서 다시 올리기
  • [x] 올리는 과정에서 backend가 어느정도 완성되어야함
• [x] API ky + solid-query로 연결
• [x] 아토믹 디자인 패턴대로 Page 단에서 호출해서 data 전달하기
  • [x] 생각보다 로딩이 오래걸리므로 skeleton UI 추가 필요
  • [x] Atom을 모아 만드므로 molecules에 Skeleton.ts 추가
  • [x] 많이 재사용하나? organisms인가? Box를 사용하면 적절하게 배치하면 되니까?
  • [x] Suspense 작동원리를 잘 알지 못해서 적어도 작동을 안하는구나 !
  • [x] suspense: true, 맞다! 하위컴포넌트에서 등록해줘야지
    • [x] Promise 자체를 반환하는 Suspense, Query문에서 하위 컴포넌트에서 비동기 선언 로딩상태를 확를 하겠다는 선언인지?
    • [x] 왜 화면에 데이터패칭은 됐는데 화면엔 안뜨지…? Solid.js의 1번만하는 렌더링 문제인가? Suspense가 아예 안됨을 확인

              <Suspense fallback={<Skeleton />}>
                  <BlogTemplate data={datas.data || []} />
              </Suspense>
  

• [x] 포트폴리오 깃허브 링크로 연결해두기
• [x] 보이는 부분 리팩토링하기
  • [x] background, color 는 style 폴더로 옮기기
  • [x] Box의 새로운 타입 지정
  • [x] Fontsize rem으로 수정
• [ ] 배경 CSS 수정하기

 

블로그에 폰트가 너무 둥글고 굵은 가독성 문제로 CSS 수정해야할거같습니다. Notion에서 그대로 복사하고 있습니다.

Backend

• [ ] Next.js 프로젝트 구조 참고해서 고치기
• [ ] CRUD 다시 작성하기
• [x] CORS 싱글톤으로 재해결
  • [x] CORS + Next.js 관련으로 딥다이브한 글을 읽을 수 있었습니다.
    • [x] 전역에서 swiper/css 파일을 임포트하는 것과 달리 컴포넌트 내부에서 임포트하는 경우 동작이 예상했던 것과 달라지기 때문입니다. [동작원리]
    • [x] 크롬과 사파리 파이어 폭스 환경에서 get Fetch가 다르게 동작할 수 있습니다.
  • [x] https://fe-developers.kakaoent.com/2023/230421-beyond-solving-problem-part-2/
  • [x] https://nextjs.org/docs/app/api-reference/next-config-js/crossOrigin
  • [x] https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
  • [x] https://nextjs.org/docs/app/api-reference/next-config-js/headers#cors
  • [x] credential mode include 일때 wildcard를 사용하면 안되는 이유 : 보안상의 이유 ⇒
    • [x] credentials 모드의 종류
      • [x] omit : 요청에 인증 정보를 포함하지 않는 기본값
      • [x] same-origin : 동일 출처의 요청에만 인증 정보를 포함
      • [x] include : 모든 요청에 인증정보를 포함
      • [x] 현재 내 코드가 인스턴스 생성해서 이렇게 보내고 있습니다.

      import ky from 'ky';
      
      export const kyInstance = ky.create({
          prefixUrl: `${import.meta.env.VITE_BASE_URL}/api`,
          credentials: 'include',
      });
      
      

  • [x] 2번째 이슈 supplied origin과 같지않음
    • [x] Access to fetch at 'http://localhost:3000/api/hello' from origin 'http://localhost:5173' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'localhost:5173' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  • [x] 3번째 이슈 response header에 include credential mode라면 true속성이 있을 것? 왜? ⇒ 보안상의 이유 (명시적으로 허용하고 있다는 것, 자격 증명을 포함한 요청히 허가된 도메인 인증)
    • [x] Access to fetch at 'http://localhost:3000/api/hello' from origin 'http://localhost:5173' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
  • [x] 4번째 이슈 next.config.js의 value in header item이 string이어야함
    • [x] 헤더 값은 항상 문자열 HTTP 프로토콜 명세에 따르면 항상 문자열로 전송하기때문에 boolean 안 됨
  • [x] local환경에서 CORS 해결 확인 / 배포도메인 추가
    • [x] Access-Control-Allow-Origin 배열로 추가했더니 표준 HTTP 사양에 위배
    • [x] multi cors 허용을 위해 middleware을 사용하기로 했다. middleware을 프로젝트 루트디렉토리에 두면 알아서 작동을 한다니… 신기!
    • [x] https://nextjs.org/docs/app/building-your-application/routing/middleware

    /** @type {import('next').NextConfig} */
    const nextConfig = {
        async headers() {
            return [
                {
                    source: '/api/:path*',
                    headers: [
                        {
                            key: 'Access-Control-Allow-Origin',
                            value: '<http://localhost:5173>'
                        },
                        {
                            key: 'Access-Control-Allow-Methods',
                            value: 'GET, POST, PUT, DELETE, OPTIONS',
                        },
                        {
                            key: 'Access-Control-Allow-Headers',
                            value: 'Content-Type, Authorization',
                        },
                        {
                            key: 'Access-Control-Allow-Credentials',
                            value: 'true',
                        },
                    ],
                },
            ];
        },
    };
    
    export default nextConfig;
    
    

• [x] Next.js 공식문서의 CORS Middleware을 사용해보자
  • [x] https://nextjs.org/docs/app/api-reference/file-conventions/middleware
  • [x] 루트 디렉토리 src 아래에 넣어 적용했다.