[ Webpack ] Proxy 설정으로 CORS 도메인 문제 해결

Webpack Proxy 설정으로 CORS 도메인 문제 해결

CORS (Cross-Origin Resource Sharing) 란?

웹브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스팩이다.
서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로,
교차 출처 자원 공유(Cross-Origin Resource Sharing)라는 이름으로 표준화가 되었다.

Webpack Proxy 설정으로 CORS 도메인 문제 해결

웹 개발 시 JavaScript 를 통해 http 요청을 날리면 콘솔창에 에러가나면서 실패한다.

이 에러를 간단하게 말하자면 동일 출처 정책으로 인해 같은 도메인이 아니라면,
요청받은 도메인 헤더에서 CORS를 활성화하지 않는이상 브라우저 단에서 위와같은 CORS 에러를 뿌리면서 요청이 실패한다.

 

LOL-state 프로젝트를 진행하면서 위와같은 문제를 해결하기위해 Proxy 서버 역할을 하는 파일을 따로 만들어서 해결한 경험이 있다. GitHub

RyuJun/lol-state

그러나 굳이 복잡하게 그런 작업을 하지 않더라도 Webpack에서 간단하게 Proxy 서버 기능을 지원하여
CORS 문제를 해결할수 있는 방법을 알게 되었다.

 

Create-react-app 으로 생성된 프로젝트 내에서 Axios를 통해 Ajax 요청을 보내는 상황이라면 아래와 같은 형태로 보낼것이다.

const ApiDefault = { 
  url : "https://kr.api.riotgames.com/lol", 
  key : "XXXXX-XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX" 
} 
let summonerUrl = `${ApiDefault.url}/summoner/v3/summoners/by-name/류똥글?api_key=${ApiDefault.key}`; 
axios.get(summonerUrl)
     .then( summonerData => { console.log(summonerData) } )
     .catch( error => console.log("Data가 없습니다.") );

이렇게 그냥 보낸다면 동일 출처 정책으로 인해 어김없이 CORS 에러가 출력되며 실패한다.

package.json 파일로 이동하여 아래와같이 Proxy 속성을 추가하고 요청보낼 도메인의 루트를 벨류값으로 넣어준다.

{
  "name": "lol-state",
  "version": "0.1.0",
  "private": true,
  "proxy" : "https://kr.api.riotgames.com" // 해당 줄 추가.
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.4.0",
    "react-animated-number": "^0.4.4",
    "react-circular-progressbar": "^0.8.0",
    "react-dom": "^16.4.0",
    "react-script": "^2.0.5",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

const ApiDefault = { key : "XXXXX-XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX" } 
let summonerUrl = `/lol/summoner/v3/summoners/by-name/류똥글?api_key=${ApiDefault.key}`;
axios.get(summonerUrl) 
     .then( summonerData => { console.log(summonerData) } ) 
     .catch( error => console.log("Data가 없습니다.") );

그 뒤에 루트 URL이 빠진 나머지 주소만 넣어준 뒤 프로젝트를 재실행하면

정상적으로 데이터를 받아오는 것을 확인 할 수 있다!