CORS Error 수정

문제상황 - CORS Error 발생

토이 프로젝트 Front 부분을 개발하는 도중 에러가 발생했습니다.

위와 같은 에러로 서버에서 데이터를 가져오지 못하는 상황이 발생했습니다. 처음보는 에러이기에 매우 당황했던 기억이 납니다. CORS(Cross-Origin Resource Sharing)라는 생소한 단어가 보입니다.(너는 또 무슨 에러니…ㅠㅠ) 좌절을 뒤로하고 CORS를 구글에 검색합니다.

CORS는 HTTP 헤더에 다른 서버에 있는 리소스에 접근할 수 있는 권한을 부여하는 것을 뜻합니다. 이 말만 들으면 조금 어려우니 간단한 그림을 보죠.

위 그림을 보면 해당 디바이스는 domain-a.com에 접속해 있는 상태입니다. 따라서 해당 url에 저장되어 있는 리소스(이미지나 css 파일)에 접근할 수 있습니다. 그런데 이 webpage는 또한 domain-b.com에 저장되어 있는 리소스인 이미지에 접근하고자 합니다.

불행하게도(?) http는 보안상의 이유로 자동으로 이러한 접근을 제한합니다. 서버들 중에는 아무나 접근해서는 안되는, 보안상으로 매우 중요한 서버들이 있을 것입니다(회사 기밀이나 회원정보 등등). 이와 같은 보안 이슈로 인해, http는 다른 출처에 존재하는 리소스의 접근을 기본적으로 차단합니다. 대신, 응답 헤더에 이를 허용한다는 CORS 헤더를 담아 응답하면 해당 서버에 접근이 가능하게 해줍니다. (기본적으로 차단을 해놓고 이러한 요청은 서버가 받아들인다고 설정하는 것이라 생각합니다.)

해결

이제 CORS를 알아봤으니 Front에서 Back으로 http 요청을 할 수 있게 코드를 작성해보겠습니다. 먼저 CORS module을 설치합니다.

$ npm install cors

해당 모듈은 CORS를 가능하게 해주는 미들웨어로 여러가지 옵션을 추가할 수 있습니다. 이 프로젝트의 경우 동영상을 생성하고 읽어들이고 부분수정하고 삭제하는 기능을 구현할 것이기에 GET, PATCH, POST, DELETE 이 4가지 method만 허용하도록 합시다. 아래와 같이 code를 작성합니다.

const express = require("express");
const mongoose = require("mongoose");
const helmet = require("helmet");
const morgan = require("morgan");
const cors = require("cors");
const dotenv = require("dotenv");

const authRouter = require("./router/authRouter");
const myRouter = require("./router/myRouter");
const videoRouter = require("./router/videoRouter");
const userRouter = require("./router/userRouter");

const config = require("./common/jwt_config");
const auth = require("./common/auth")();

dotenv.config();

const PORT = process.env.PORT;
const dbURI = process.env.MONGODB_URI;

const app = express();

app.use(helmet());
app.use(morgan("dev"));

const corsOptions = {
  methods: ["GET", "POST", "PATCH", "DELETE"]
};

app.use(cors(corsOptions));
app.use((req, res, next) => {
  mongoose
    .connect(dbURI, {
      useCreateIndex: true,
      useUnifiedTopology: true,
      useNewUrlParser: true,
      useFindAndModify: false
    })
    .then(() => {
      console.log(`✔ DB Connected`);
      next();
    })
    .catch(error => {
      console.log(`🚫 DB Connect Fail: ${error}`);
      next(error);
    });
});

app.use(auth.initialize());
app.use(express.json());

app.use("/api/auth", authRouter);
app.use("/api/my", auth.authenticate(), myRouter);
app.use("/api/users", userRouter);
app.use("/api/video", videoRouter);
app.use("/api/comment");

app.use(() => mongoose.disconnect());

app.listen(PORT, () => {
  console.log(`Listening on Port:${PORT}`);
});

들어오는 모든 요청에 CORS가 적용되어야 하기에 처음으로 요청을 받는 코드 위에 app.use(cors(corsOptions));를 작성합니다.

추가된 코드는

const cors = require("cors");
const corsOptions = {
  methods: ["GET", "POST", "PATCH", "DELETE"]
};
app.use(cors(corsOptions));

입니다.

이렇게 하면 CORS Error를 해결할 수 있습니다.