[cors]Cross-Origin Resource Sharing and Proxy

안녕하세요. front-end 개발시 개발자들을 괴롭히는 cors에 대해 알아보고 더 나아가 프록시 설정하는 방법에 대해 알아봅시다. 

 

현재 프로젝트의 front-end 부분이 거의 맨땅의 헤딩인 수준이라... 이것 저것 많은 이슈가 나오고 있는데.. 그 중 하나가 cors입니다. 

 

웹의 동작을 살펴보아요.

 

1. 크게 브라우저, 웹 서버, api서버 세 가지로 나눠봅시다.

 

2. 브라우저에서 url(https://naver.com)을 통해 웹서버로 요청을 보냅니다.

3. https://naver.com > 네이버 웹서버에선 해당 html, css, js등의 파일을 브라우저에 로드해줍니다. 

 

4. 로드된 html,css, js등의 파일들은 브라우저에서 화면으로 출력해줍니다.

 

5. 이 과정에서 로드된 파일들은 브라우저가 해석을 하게 되는데 javascript에서 origin(프로토콜+도메인+포트)이 다른곳으로 어떠한 요청을 날리면 서버가 아닌 브라우저에서 cors에러를 뱉는다.

 

6. 다시 한번, 서버가 아닌 오직 브라우저에서 뱉는 에러입니다.

 

이러한 상황을 대처하기 위한 방법으로 proxy서버를 두는 것입니다..

알아본 방법으론 두 가지 방법이 있습니다.

리액트 기준으로 설명드리겠습니다.

 

1. package.json에 "proxy" : "url"추가

 create-react-app라이브러리는 기본적으로 내장 웹서버와 proxy서버를 제공한다.

 package.json에 "proxy": "https://domain.co.kr"(요청할 origin) 추가

 npm restart

 

2. setupProxy.js

 1) npm install http-proxy-middleware

 2) src하위에 setupProxy.js파일을 생성

 3)

const proxy =require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    proxy.createProxyMiddleware("/api1", {
      target: "https://api.plos.org/",
      changeOrigin: true,
      pathRewrite: {"^/api1": ""},
    })
   ,
    proxy.createProxyMiddleware("/api2", {
      target: "https://tools.learningcontainer.com",
      changeOrigin: true,
      pathRewrite: {"^/api2": ""},
    })
    ,
    ...
  )
}

 

해당 코드 작성 후 저장 및 npm restart

 

 4) ajax요청으로 테스트

      <input type="button"
        value="api1"
        onClick={()=>{
          axios.get("http://localhost:3000/api1/search?q=title:%22Drosophila%22%20and%20body:%22RNA%22&fl=id,abstract")
            .then((res)=> {
              console.log(res.data);
            })
        }}
      />
      <input type="button"
        value="api2"
        onClick={()=>{
          axios.get("http://localhost:3000/api2/sample-json-file.json")
            .then((res)=> {
              console.log(res.data);
            })
        }}
      />

응답값 확인

 

이렇게 두 가지 방법 중 하나로 세팅을 하면 위 그림처럼 브라우저에서 직접 api서버를 호출하지 않고

이러한 식으로 proxy서버가 api를 호출하여 cors에러를 해결하게 됩니다.

 

첫 번째 방법은 실제 개발 서버에 올려서 테스트 할때는 사용하지 못할 것 같고, 두번째 방법으로 배포하고 테스트 해봐야 겠네요.

 

아직 퍼펙트하게 정리가 되진 않았지만.. 어느정도 감이 옵니다 ㅎㅎ

 

유용하셨거나 궁금하신점은 댓글 남겨주세요~

하트는 글작성에 큰 힘이 됩니다 ♥