vercel 배포에서 마주친 CORS 에러… ⭐️⭐️⭐️

이슈가 끝이 없다…

프론트에서 프록시 서버를 사용해서 CORS를 해결했었다! 문제는 배포 이후에는 적용이안됐다… 2가지 문제가 있었다.

1. 프로덕트에는 프록시가 적용이 안된다는 것이었고,,,
2. 문자열 인식을 vercel에서는 다르게 하는것(?) ⇒ 이건 아니였던 것으로 확인…

이를 해결하기 위해 기존에 SPA에서 404page 처리를 위해서 세팅해줬던 vercel.json을 수정해야했다.

vercel.json에서 routes를 통해 src 경로로 들어오는 요청을 /로 변환시켜주겠다는 값으로 유저들이 SPA내의 어떤 경로에서 새로고침을 했을 때 404page로 이동하는 것을 해결해주기 위해서 세팅했던 값이다.

// 기존 vercel.json
{
	"routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

하지만 프록시 서버를 쓰기위해서는 rewrites를 통해 destination에 프록시 서버 경로를 넣어줘야한다.

하지만 vercel에서 routes와 rewrites를 함께 쓸 수 없었다. 또한 path를 설정하는 패턴도 달랐는데 멘토님께 여쭤보니 vercel에서 이전에는 routes를 이용해서 rewrites, redirects, headers, cleanUrls의 처리를 모두 했다면 현재는 해당 역활에 맞게 분리된 것이며 routes는 하위호환성을 위해서 남겨둔 것으로 보인다!

If rewrites, redirects, headers, cleanUrls or trailingSlash are used, then routes cannot be present.

멘토님께서 rewrite와 redirects의 차이도 설명해주셨지만 잘 몰라서 이번 기회에 찾아보니 아래와 같이 정리할 수 있었다.

rewrite : 유저가 입력한 url 그대로 유저에게 보여져 유저는 화면이 변경된지 모름

redirect : 정해진 path로 url이 바뀜

따라서 rewirtes를 통해 기존의 routes에서 해준 404처리와 함께 프록시 서버로 요청도 변경해준다.

// 기존 vercel.json
{
  "rewrites": [
    {
      "source": "/:path*",
      "destination": "/index.html"
    },
    {
      "source": "/api/:path*",
      "destination": "http://172.67.167.196:443/:path*"
    }
  ]
}

이를통해 프록시 서버를 배포환경에도 적용해서 슬랙 알림 연동 에러를 해결했다!

슬랙알림 등록 후 사용자가 증가 하는게 보여서 기분이 좋다ㅎㅎㅎㅎ