cors 에러 해결

프로젝트를 하면서 cors에러가 발생했다. 내가 해결한 방법을 기록한다.

 

 

우선 CORS가 뭐야?

 

다른 도메인(domains (en-US))에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. CORS (Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것입니다.

 

교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

 

쉽게 말해 다른 도메인으로 요청을 보내면 보안을 위해 브라우저가 차단하는 것이다.

 

 

해결 방법

 

지금 내 프로젝트의 흐름은 브라우저(localhost:3070) -> Next(프론트 서버, localhost:3070) ->express(백엔드 서버, localhost:3075)이다.

 

cors 에러는 localhost:3070 브라우저에서 localhost:3075 백엔드 서버로 요청을 보내기 때문에 발생한다.

 

 

Proxy 방법

 

브라우저에서 다른 도메인으로 요청을 보냈을 때 cors 에러가 생기는데 서버에서 서버에 요청했을 때는 cors 에러가 안생긴다.(프론트서버 > 백엔드 서버는 안생김 브라우저 > 백엔드 서버는 에러 생김)

 

같은 도메인인 브라우저 > 프론트 서버로 보내는 건 에러가 안 생긴다. 따라서 ( 브라우저 > 프론트 서버 > 백엔드 서버 >프론트 서버> 브라우저)로 보내는 것이 proxy 방법이다.

 

서버 쪽에서 해주는 방법

 

back/app.js 

 

app.js 에서 cors라는 미들웨어를 통해 origin을 true로 설정해주면 된다.(주소가 자동으로 들어가 편리하다.)

HTTP 응답 헤더Access-Control-Allow-Origin :  true 혹은 Access-Control-Allow-Origin: 허용하고자 하는 도메인 설정을 할 수 있다.

const express = require('express')
const cors = require('cors')
const app = express()
 
app.use(cors(
	origin:true
))

 

프론트 쪽에서 해주는 방법

 

우선 내 프로젝트는 next로 만들어져서 next가 중간 서버 역할을 해주기 때문에 proxy 서버를 따로 설정할 필요가 없다.

그러나 CRA로 만들어진 프로젝트의 경우 http-proxy-middleware 사용하여 proxy 서버를 설정 후 package.json에 proxy를 추가해서 cors 에러를 해결할 수 있다.

 

 

1) npm i http-proxy-middleware
2) front/src/setupProxy.js 생성

 

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

 

package.json에 proxy 추가

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

 

참고링크 

 

교차 출처 리소스 공유 (CORS) MDN

React - (CORS / http-proxy-middleware)