[React] CRA 에서 proxy 가 동작하지 않아요!

2022.8.25 (목) 작성

1. 에러❗️

create-react-app으로 앱을 만들고, proxy 설정을 한 뒤 axios로 GET 요청을 보냈다. 그런데 응답이 안 오고 내 리액트 앱의 html 문서가 뜬다!

2. 상황

• CRA로 리액트 앱을 만든 뒤, 아래처럼 package.json에 프록시 설정을 주었다.

• 그리고 다음과 같이 단순한 앱을 구성해 응답을 받아오게 만들었다.

import { useState } from "react";
import axios from 'axios';

function App() {
  const [data, setData] = useState("");

  const handleClick = () => {
    axios.get("/")
    .then(res => {
      console.log(res.data);
      setData(res.data);
    })
    .catch((Error)=>{
      console.log(Error);
  })
  }

  return (
    <div className="App">
      <button onClick={handleClick}>통신하기</button>
      <div>{data}</div>
    </div>
  );
}

export default App;

• 그런데 화면에 응답대신 리액트 앱의 html 문서가 뜬다…

• 네트워크 탭을 확인해보니 내 리액트 앱 실행 주소인 http://localhost:3000으로 304 리다이렉트가 되어서 내 앱의 html 문서가 응답으로 받아지는 듯하다…

3. 해결💡

• 프록시는 get(’/’) 이렇게 슬래시 하나만 경로로 적으면 작동이 안 된다!
• get(’/api’) 이렇게 뒤에 뭐라도 uri 가 더 붙어있어야 작동한다.

4. 알게 된 것✨

👉 왜 '/' 으로는 프록시가 동작하지 않을까?

프록시를 허용하면 일단 Request URL 앞 부분은 실행 주소(http://localhost:3000)로 뜬다. 이는 프록시 동작 순서와 관련 있다.

리액트에서 프록시를 설정하면 다음처럼 동작한다. 

1. 리액트 앱에서 화면을 전달받는다. 이때 호스트는 http://localhost:3000
2. 버튼을 누르면 브라우저가 리액트 앱에 요청⇒ 그래서 프록시 설정 시 Request URL 앞부분은 http://localhost:3000 이 뜬다!
   → 만약 (’/api’) 로 요청을 보내면 http://localhost:3000/api로 보내진다.
3. 그 후, 리액트 앱에 구축된 프록시를 통해 백엔드 서버로 다시 요청을 보낸다.
   → proxy로 설정된 주소가 http://localhost:8080이라면 http://localhost:8080/api로 호출된다.
4. 백엔드 서버가 응답을 보낸다.
5. 리액트 앱이 이 응답을 다시 브라우저에 보낸다.

• 이때, 요청 보내는 경로가 ‘/’ 라면, 즉 proxy로 설정한 주소 뒤에 뭔가 더 붙이지 않았다면 3번 과정이 동작하지 않는다.
• 즉 http://localhost:8080/ 로 가야 되는데, http://localhost:3000/ 로 가게 되고, 결국 리액트 앱으로만 요청을 보내는 꼴이 되어서 리다이렉트가 된 것!..

참고자료

https://junhyunny.github.io/information/react/react-proxy/

 

👉 확인해보기

• 위의 에러 예시는 요청 보내는 주소가 ‘/’ 일 때고, 아래는 아닐 때다. ‘/weather~~’로 보내니 잘 작동한다.

• 위에 설명했듯이, 프록시는 우선 리액트 앱으로 요청이 되므로 Request URL은 localhost:3000 이 찍힌다.

 

👉 + 참고) package.json 설정 바꾼 후에는 터미널 끄고, 다시 npm run start로 실행시키자.

리액트 앱을 재시작 안 해주면 proxy 설정 바꾼 게 적용이 안 된다.

 

👉 + 참고) Proxy error: Could not proxy …

Proxy error: Could not proxy request /main from localhost:3000 to http://서버주소

⇒ 이 에러는 백엔드 서버가 종료되어있을 때 발생한다. 해당 프록시 주소로 요청을 보냈는데 서버가 없어서 에러가 뜨는 것.

⇒ 백엔드분들에게 서버를 켜달라고 하자.

5. 결론🔥

CRA 에서 proxy 설정하고, 요청을 보낼 때, ‘/’로만 경로를 작성하면 프록시가 작동 안 된다! 꼭 뒤에 url-path를 더 붙여주고 요청을 보내자!!

//이렇게가 아니라
axios.get("/")

//이렇게!!! 뭐라도 붙여야 proxy가 작동
axios.get("/api")