react api 프록시 설정 ( feat. oauth 도메인 이슈 )

oauth2 방식의 인증로그인 처리를 연동했는데, 리다이렉트 후 설정된 쿠키 도메인이 호출한 프론트 주소가 아닌 백엔드 주소로 설정 되는 상황이 발생하였다.
이는 api 호출에 대해 프록시 설정을 추가하고 API 요청을 백엔드 서버로 전달 하는 방식으로 해결이 가능하다

oauth 방식이 api 호출 할 경우 주의할 점이 있는데 서버가 다를경우
window.location으로 직접 화면에서 갱신 -> 리다이렉트 형식이 으로 사용 하거나,프록시 설정 이후 모듈에 태워서 호출 해도 상관은 없다.
( 같은 서버에서 할 경우엔 직접 호출해도 상관 없음 )

// 화면 직접호출
window.location.href = "/api/auth/oauth";

// axios 사용 axiosConfig 설정정보 
const axiosConfig = {
  // 프록시 처리를 위해 베이스 서버 설정 안함
  // baseURL: process.env.REACT_APP_PROXY_URL,
  timeout: 60 * 3 * 1000,
  headers: {
    Accept: "text/html, application/json, text/plain, */*",
    "Content-Type": "application/json;charset=UTF-8",
  },
  withCredentials: true,
};

const http = axios.create(axiosConfig);

// axios 사용으로 호출
http.get("/api/auth/oauth");

아래의 설정을 추가 하면 /api로 시작하는 요청은 개발 서버에서 백엔드 서버로 프록시 되며,
아래와 이미지와 같이 도메인이 호출한 프론트서버의 도메인으로 정상적으로 셋팅 된다. ( localhost 에서 테스트 )

인증실패케이스 - Domain 인증서버로 설정 됨

인증성공케이스 - Domain FE 호출서버 설정

프록시 설정 방법

1. http-proxy-middleware 사용

• src 디렉토리 안에 setupProxy.js 파일을 생성
• CRA 로 생성된 프로젝트는 기본적으로 있음, 없을 경우 직접 설치 ( npm i http-proxy-middleware )

// setupProxy.js 내용
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',    // api 경로
    createProxyMiddleware({
      target: 'http://xxx.xx.xx.xx:8080',  // api 서버 주소
      changeOrigin: true,
    })
  );
};

2. webpack 설정 ( vue.config.js 에서도 사용 가능 )

devServer: {
	...
    proxy: {
      // api 경로 
      '^/api': {
        // api 서버 주소
        target: process.env.PROXY_URL,
        secure: false,
        changeOrigin: true,
        logLevel: 'debug',
        headers: {
          Connection: 'keep-alive',
        },
      },
    },
  },

프록시 서버 설정은 cros 오류를 예방 하기 위해서도 많이 사용 되지만 oauth의 이슈로의 예시는 없어서 작성해 보았다.