[CORS] 가장 먼저 직면하는 문제. 개념 알고 해결하기

CORS (CROSS-ORIGIN-RESOURCE-SHARE)

보안을 위해서 아무 클라이언트 가서버로 XRH 요청을 할 수 없게 하기 위한 것입니다.

 

클라이언트는 서버와 같은 도메인을 사용하거나 서버에서 설정한 도메인으로 요청을 하지 않으면 데이터를 받을 수 없습니다. 서버에서 요청을 거절하기 때문입니다.

서버에서 응답을 승인할 도메인을 지정하고 클라이언트 쪽에서 승인받을 수 있는 URL로 요청을 보내야지 데이터를 성공적으로 받을 수 있습니다.

 

 

CORS 에러 문제 해결하기

1. express 서버에 CORS 허용 URL 설정하기

cors 노드 패키지를 설치합니다.

npm i cors

//app.js
const exrpess = require('express');
const cors = require('cors');

const app = express();

app.use(cors()); // 모든 도메인의 요청을 승인
app.use(cors({origin: "http://승인할 도메인"}));

CORS 노드 패키지를 사용하면 express에 CORS설정을 간편하게 할 수 있습니다.

 

 

2. front-end 설정으로 server에 설정된 CORS 허용 URL로 변경하기

두 번째 방법은 보통 프론트엔드 개발자들이 로컬에서 화면을 개발하면서 서버를 사용하기 위해서 localhost:8080 로컬 도메인을 서버에 설정된 도메인으로 변경해서 요청하는 방법으로 많이 사용합니다.

 

Vue-cli나 create-react-app같은 자동 세팅 도구를 사용할 경우에는 vue.config.js나 package.json에 proxy를 설정해서 문제를 해결할 수 있습니다.

 

webpack-dev-server를 사용하는 경우

host와 port를 서버에 설정한 origin과 일치하게 설정합니다.

// webpack.config.js:
module.exports = {
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    // publicPath: "/",
    host: "levelup.com",
    port: 80,
    // overlay: true,
    // stats: "errors-only",
    // historyApiFallback: true,
  },
}

vue-cli를 사용하는 경우

//vue.config.js
export default = {
  devServer: {
    proxy: {
      "/api": {
        "target" : "levelup.com"
      }
    }
  }
}

create-react-app으로 proxy 설정하기

// package.json

{
  proxy: 'http://localhost:8000'
}