CORS

cors 란

Cross-Origin-Resource-Sharing 의 약자로 다른 도메인에서 리소스를 요청하는 방법을 말합니다.
프론트단과 백단을 각각 다른 로컬 서버로 개발할시 흔히 볼 수 있습니다.
아무런 설정도 없이 다른 도메인에서 서버를 요청하면 다음과 같은 에러를 확인할 수 있습니다.

Access to XMLHttpRequest at 'http://localhost:8000/api/search' from origin 'http://localhost:3002' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

3002 포트에서 8000/api/search 로 서버를 요청한 경우인데, cors 문제가 발생한 것을 확인할 수 있습니다.
이를 해결하기 위해서 같은 도메인에서 작업하는 방식이 있긴 하지만 매번 그런 식으로 작업하는 것을 불가능하니..

해결

node.js 를 기준으로 사용시 cors 미들웨어를 설치해주시면 됩니다.

npm i cors
yarn add cors

// 아래와 같이 셋팅해줍니다.
const express = require('express');
const cors = require('cors');
const app = express();

// 다른 도메인, 포트에 있는 리소스를 요청을 허용하도록 CORS 허용
app.use(cors());