일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- 세부
- Webpack
- 스노쿨링
- 유효성검사
- 중고나라
- 네이버페이사기
- JavaScript
- plugin
- 삼성무선청소기제트
- 중고나라사기
- 정직하게사세요
- 해외여행
- 사기
- 정규식
- 여행
- js
- 구분
- autocomplate
- 마사지
- 막탄
- 특수문자
- Hooks
- webpack.config.js
- 자동완성
- 스쿠버다이빙
- 중고거래사기
- REACT
- ES6
- 맛사지
- Today
- Total
Ryu.log
[ 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
그러나 굳이 복잡하게 그런 작업을 하지 않더라도 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이 빠진 나머지 주소만 넣어준 뒤 프로젝트를 재실행하면
정상적으로 데이터를 받아오는 것을 확인 할 수 있다!
'Front-end > Webpack' 카테고리의 다른 글
[ Webpack ] Webapck 설정값 정리 (1) | 2019.09.24 |
---|