[React] 'GET http://localhost:3000/User', "Uncaught SyntaxError: Unexpected token '<' " Error

문제

특정 페이지에서 새로고침 시 'GET http://localhost:3000/경로', "Uncaught SyntaxError: Unexpected token '<' " Error 발생

원인 파악

• 특정 페이지 외에 다른 페이지에서도 해당 에러나 난 경험이 있음
• 당시 해결 방안으로 다음과 같은 방법을 사용했었음

1. package.json에 homepage 추가
   "homepage": ".",

2. public/index.html에 base 추가

<base href="/" /> 

위 방법이 적용되어 있음에도 에러가 발생하는 것으로 보아, 다른 곳에서 문제가 발생하는 것으로 판단하여 다른 원인을 찾아보니 api endpoint 관련 에러도 해당 에러를 발생시키는 것으로 확인

해당 페이지 api를 확인해보니 기존에 다른 페이지에서 활용하는 api의 url의 시작이 같았는데 다른 페이지에서 사용하는 api는 @RequestMapping(value = "/apiExam1") 가 controller에 적용되어 있었고, 문제가 되는 페이지에서 사용되는 api의 경로는 위의 @RequestMapping 없이 /apiExam1/.../... 와 같은 식으로 만들어져 있었음

그리고 http-proxy-middleware를 사용하여 proxy가 설정되어 있었는데,

app.use(
    '/apiExam1',
    createProxyMiddleware({
      target: process.env.REACT_APP_SERVER,
      changeOrigin: true,
    })
  );

위와 같이 설정이 되어 있었지만 api를 제대로 못 찾아 해당 에러가 발생하는 것으로 인지

해결 방법

• 정확한 방법인지는 아직 모르겠으나, 여러개로 나눠져 있던 proxy를 하나로 뭉치니 해결은 된 상황

app.use(
    createProxyMiddleware(['/apiExam1','/apiExam2', '/apiExam3', '/apiExam4'], {
        target: process.env.REACT_APP_SERVER,
        changeOrigin: true
    })
  )

위와 같이 하나로 묶으니 새로고침 시에도 에러 발생하지 않음

• 해결은 됐으나 서버(spring boot)에서 RequestMapping 존재유무에 따라 문제가 발생하는 것인지, 단순히 프론트의 proxy 설정 때문에 발생한 에러인지는 더 확인해볼 필요가 있음