willy4202
willyLog
willy4202
  • 분류 전체보기 (22)
    • 생각정리 (9)
    • studyLog (12)
      • vue3 (4)
      • 알아보자 (5)
      • CS (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 자바스크립트
  • 프론트엔드 배포
  • vue composition
  • 컴포지션
  • 웹호환
  • 회고
  • i18n
  • vue3
  • 우형
  • 중간면담
  • 수습
  • 8020
  • 라이프사이클훅
  • 컴포지션API
  • Setup
  • VUE
  • 개발자
  • 회사생활
  • 우아콘
  • 프론트엔드

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
willy4202

willyLog

Vercel에서 Proxy를 사용해보자.
studyLog/알아보자

Vercel에서 Proxy를 사용해보자.

2022. 10. 7. 09:15

axios로 CORS 정책을 준수하는 방법에 대해서 공부하고 있다.

크게 두가지 방법으로 나뉘는데,

  1. 서버에서 Access-Control-Allow-Origin 헤더를 직접 설정해준다.
  2. 프론트에서 Proxy를 이용해서 설정한다.

이 같은 방법이 있다.

위의 두 방법을 모두 적용해 두가지 방식의 axios 통신을 구축한다음
dev 환경에서 실행했을 땐, 모두 정상작동
webpack 프로젝트 환경 내에서 devServer를 통해 proxy를 태운다면 원활하게 작동

CTO님께서는 Production에서는 또 다른 방법이 필요할거라고 말해주셨다.
vercel을 통해 환경을 바꿔주고, 실행해봤다.

그런데 vercel을 통해서 배포했을때,
304라는 에러와 함께 아무것도 전달되지 않았다.

proxy를 태우지 않은 경우에는 정상적으로 dev서버와 통신이 가능했다.
검색을 해보니, webpack devProxy는 프로덕션 환경에서 사용하기 위해 있는 것이 아니라는 문서를 볼 수 있었다.

생각해보니,,, 이름부터 devProxy 인데, 어떻게 프로덕션에서 사용될 수 있겠나,,?

찾아보니 vercel에서 Proxy를 태우기 위해선, vercel.json이란 파일을 root에 생성해주고, 다음과 같이 설정해주면 된다.

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://~~;
    }
  ]
}

source 라고 적혀있는 부분을 찾아, destination 으로 대신 전달해주는 셈이다.
이러면 성공적으로 vercel에서도 200 통신이 떨어지는 것을 확인할 수 있다.

'studyLog > 알아보자' 카테고리의 다른 글

도커가 뭐에요  (0) 2022.11.23
크로스 브라우징이란?  (0) 2022.11.02
구글 클라우드 플랫폼으로 Vue 프로젝트 배포하기 + 300 달러 공짜로 받기  (0) 2022.10.08
DP(다이나믹 프로그래밍) 그거 어떻게 하는건데?  (0) 2022.09.20
    'studyLog/알아보자' 카테고리의 다른 글
    • 도커가 뭐에요
    • 크로스 브라우징이란?
    • 구글 클라우드 플랫폼으로 Vue 프로젝트 배포하기 + 300 달러 공짜로 받기
    • DP(다이나믹 프로그래밍) 그거 어떻게 하는건데?
    willy4202
    willy4202
    다양한 정보를 공유합니다.

    티스토리툴바