[React.js] Cross Domain 이슈 해결하기

 동일 출처 정책(same-origin policy) 

• 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용을 하는 것을 제한하는 중요한 보안 방식
• 동일한 출처 간의 호출만 허용
• 동일한 출처 : 두 URL의 프로토콜, 포트(명시한 경우), 호스트가 모두 같은 경우

URL1	URL2	결과	이유
http://store.company.com/dir/page.html	http://store.company.com/dir2/other.html	O	경로만 다름
	http://store.company.com/dir/inner/another.html	O	경로만 다름
	https://store.company.com/secure.html	X	프로토콜 다름
	http://store.company.com:81/dir/etc.html	X	포트 다름(http://는 80이 기본값)
	http://news.company.com/dir/other.html	X	호스트 다름

 

 크로스 도메인(Cross Domain) 

• 자바스크립트(Javascript)의 동일 출처 정책(same-origin policy) 법칙에 어긋나는 호출
• 서로 다른 도메인 간의 호출

따라서 JavaScript의 AJAX를 통해 다른 도메인 서버의 데이터에 접근이 불가능하다.

하지만, 서버의 효율적 이용을 위해 분산 서버를 운영하거나, API 사용을 위해서는 크로스 도메인을 허용을 해야한다.

크로스 도메인 문제를 해결하는 방법 중 하나는 CORS(Cross-Origin Resource Sharing) 작동이다.

 

 CORS(Cross-Origin Resource Sharing) 

• 추가적인 HTTP Header를 사용해 다른 출처의 데이터에 접근할 수 있도록 하는 메커니즘
• 공유를 허용하지 않으면, CORS 에러가 발생

 

 React에서 CORS Error 발생 시 해결방법 

Access to XMLHttpRequest at 'URL2 : Destination URL' from origin 'URL1 : Source URL (ex.http://localhost:3000)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

url 호출 시 크롬 콘솔 창에 위와 같은 에러 메세지가 발생했다면, CORS Error가 발생한 것이다.

http-proxy-middleware를 사용해 두 서버 간의 프록시 서버를 둠으로써 해결할 수 있다.

 

 

먼저 아래 명령어를 사용해 모듈을 설치한다.

 

npm install http-proxy-middleware

 

/src/setupProxy.js 파일을 생성해 아래와 같이 입력한다.

• target : target host
• changeOrigin : needed for virtual hosted sites
• pathRewrite : rewrite path

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

module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: "[목적지 주소]",
            changeOrigin: true,
            pathRewrite: {
                '^/api': '' // 하위 url 초기화
            }

        })

    );
};

 

호출할 페이지에서 아래와 같은 호출을 통해서 proxy 사용이 가능하다.

 

import axios from 'axios';

axios.get('/api')
  .then(function (response) {
  	console.log(response);
  })
  .catch(function (error) {
  	console.log(error);
  });