[React.js] CORS 크로스 도메인 이슈

axios 를 활용하여 클라이언트 개발을 진행하려다가 CORS 이슈가 발생해서 증상을 살펴보았습니다. 

CORS(Cross Origin Resource Sharing) : 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘. 이 때 요청을 할 때는 cross-origin HTTP 요청에 의해 요청됩니다. 하지만 html 또는 script와 같은 언어로 인해 CORS 같은 상황이 발생하면 외부서버에 요청한 데이터를 브라우저에서 보안 목적으로 차단합니다. 

저의 경우 localhost:8100 에 서버를 두었고, react 웹 서버는 localhost:19006 에서 실행하고 있었기 때문에 발생하였습니다.

App.js

getLoginUser = async (id, password) => {
    const { user } = await axios({
          method: 'post',
          url: `http://localhost:8100/v1/auth/login`,
          data: {
            id,
            password
          }
        }
    )
    this.setState({isLogin: true, User: user})
}

 

해결방법

위의 에러가 나타나는 이유는 JavaScript 에 동일 출저 정책으로 동일한 도메인과 포트여야지만 발생하지 않는 에러입니다. 그래서 cross-origin HTTP 요청을 허가하여야 하는데, 가장 대표적으로는 Allow CORS Chrome Extension을 설치하였습니다. 

1. Allow CORS Extension 설치

 https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related

Allow CORS: Access-Control-Allow-Origin

하지만 위의 경우는 정확한 해결방법이 아닙니다. 이 브라우저를 사용하지 않고 다른 브라우저 또는 앱에서 실행될 때는 마찬가지의 에러가 발생합니다. 

2. Access-Control-Allow-Origin response 헤더를 추가

  getLoginUser = async (id, password) => {
    const { user } = await axios(`http://localhost:8100/v1/auth/login`, 
        (req, res) => {
           ... 
           res.header("Access-Control-Allow-Origin", "*")
           res.send(data)
        }
    )
  }

하지만 모든 REST API 에 이 부분을 적용하기는 어렵습니다. 

---

1. node.js 의 미들웨어 CORS 추가

아래의 명령어를 통하여 설치할 수 있습니다. 

$ npm install -save cors

그리고 소스내에서 아래와 같이 사용합니다. 

const cors = require('cors')

...

app.use(cors()); // cors 미들웨어 추가

마지막으로 서버에서 설정하는 글은 여기에 있습니다!