🎀 작업환경 🎀
front-end : react
back-end : spring
배포환경 : ubuntu 20.04 / apache

---

나를 괴롭게 한 오늘의 문제를 소개한다

local에서는 api랑 통신 잘 해서 값 잘만 받아오더니만,,
빌드해서 서버에 올리니까 res값으로 html만 호로로로록 찍히는 문제가 생기는게 아닌가 ㅠㅠㅠㅠ
proxy를 못읽고 값을 이상하게뱉는 문제가 발생,,

그래서 react 오픈채팅방에도 질문해보고 구글링 별 키워드로 다 쳐보니 관련자료가 뜨든🎉
이유는 proxy가 개발환경에만 지원되기 때문이라고 한다
(stack overflow 진짜 최고시다 ㅠ)

local 환경에서의 api 통신

api통신을 위해 url을 사용하는데

useEffect(() => {
        axios.get('http://localhost:8080/api/test')
            .then(response => { console.log(response) })
    }, [])

이런식으로 http://localhost:8080 < 를 직접적으로 써주면 cors 문제가 발생한다!
로컬에서는 아래 방법을 이용하면 간단하게 문제가 해결됐다.

✨ local proxy 설정방법 1

http-proxy-middleware 를 설치하고 (yarn add나 npm install)
src 밑에 setupProxy.js파일 생성하고
거기서 url이 /api로 시작하는건 target의 주소와 통신하겠다고 설정해주기

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:8080',
            changeOrigin: true,
        })
    );
};

✨ local proxy 설정방법 2

proxy 주소를 package.json에 추가해주기

  "proxy": "http://localhost:8080"

그러나 빌드 시 이 설정이 다 무용지물이됐구욘,,

build 환경에서의 api 통신

환경변수 설정, 선언

프로젝트 최상단(package.json과 동등한 레벨!)에

env.product(배포시 불러오는 환경변수)와
env.development(개발환경에서 불러오는 환경변수)를 만들고 아래와같이 환경변수를 만들어준다.

아 그리고 변수이름에 REACT_APP_ 이 꼭 들어가야한다고 함

env.product

REACT_APP_DB_HOST="http://localhost:8080"

env.development

REACT_APP_DB_HOST=""

환경변수 호출

특정 js파일에서 api 호출

useEffect(() => {
        axios.get(process.env.REACT_APP_DB_HOST + '/api/test')
            .then(response => { console.log(response) })
    }, [])

이런식으로 설정해주면

결과

개발환경 에선
위에 설명한 로컬에서의 프록시 설정해준 루트로 api호출이 돼서 cors 오류가 나지 않고,

배포환경 에선
http://localhost:8080/api/test 로 정확한 api호출주소를 매칭한다.
대신 cors 오류가 나서 spring에서 cors오류 잡아줘야함 ^^

spring cors 오류 잡기 잘 설명해두신 분 블로그 링크검~!

결론적으로 api를 호출할 때 DB host + 매칭 url을 그대로 넣어주고
back에서 cors오류를 잡은것이다,,