CORS 문제

CORS(Cross-Origin Resource Sharing)는

웹 브라우저에서 다른 출처(origin)에서 자원을 요청할 때 발생하는 보안 메커니즘

동일 출처 정책(Same-Origin Policy)에 의해,

브라우저는 다른 출처의 자원 요청을 기본적으로 제한하는데,

에러 메세지는 브라우저의 SOP 정책에 따라 다른 출처의 리소스를 차단하면서 발생된 에러이다.

이 CORS는 : SOP 정책을 위반해도 CORS 정책에 따르면 다른 출처의 리소스라도 허용한다는 뜻

이 문제를 해결하는 방법 중 proxy를 사용해 해결하는 방법이 있다

프록시 서버 사용:

클라이언트와 대상 서버 사이에 프록시 서버를 두어,

클라이언트는 동일 출처로 요청하고 프록시 서버가 실제 대상 서버로 요청을 전달하는 방법

Proxying API Requests in Development | Create React App

Note: this feature is available with react-scripts@0.2.3 and higher.

https://create-react-app.dev/docs/proxying-api-requests-in-development/

아래 부분을 참고하면,

우선 모듈을 다운받아야 한다.

client 부분에 설치하고


npm install http-proxy-middleware --save

src에 setupProxy.js 파일을 만들고 아래 내용을 넣어야 한다

Node.js 기반의 웹 애플리케이션에서 프록시 미들웨어를 설정하는 방법인데

http-proxy-middleware 라이브러리를 사용하여 프록시를 설정하고,

특정 경로로 들어오는 요청을 다른 서버로 전달하는 역할을 한다.


// CORS 문제 해결을 위한 proxy 부분

const { createProxyMiddleware } = require("http-proxy-middleware"); //라이브러리에서 createProxyMiddleware 함수 가져옴

module.exports = function (app) {
  app.use(
    //api로 시작하는 경로에 대해 미들웨어 적용
    "/api",
    //프록시 미들웨어 생성
    createProxyMiddleware({
      target: "http://localhost:5000", //api 경로로 들어오는 요청 http://localhost:5000으로 전달
      changeOrigin: true, //원본 서버에 전달되는 요청의 Host 헤더를 대상 서버의 도메인으로 변경
    })
  );
};

참고

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이 아니다. 프론트엔드 개발자 입장에선 요청 코드를 이상하게 적은것도 아니고, 백엔드 개발자 입장에선 서버 코드나 세팅이 이상한것도 아니다. 모든게 멀쩡한데 왜 요청한 자료에 대한 응답을 시뻘건 에러줄로 확답하는게 문제이다. 🤬 이러한 현상이 일어나는 이유는, 웹 브라우저는 HTTP 요청에 대해서 어떤 요청을 하느냐에 따라 각기 다른 특징을 가지고 있기 때문이다. 요청 방식에 따라 다른 CORS 발생 여부 1. , , 2. XMLHttpRequest, Fetch API 스크립트 → 기본적으로 Same-Or..

https://inpa.tistory.com/entry/WEB-📚-CORS-💯-정리-해결-방법-👏


// CORS 문제 해결을 위한 proxy 부분

const { createProxyMiddleware } = require("http-proxy-middleware"); //라이브러리에서 createProxyMiddleware 함수 가져옴

module.exports = function (app) {
  app.use(
    //api로 시작하는 경로에 대해 미들웨어 적용
    "/api",
    //프록시 미들웨어 생성
    createProxyMiddleware({
      target: "http://localhost:5000", //api 경로로 들어오는 요청 http://localhost:5000으로 전달
      changeOrigin: true, //원본 서버에 전달되는 요청의 Host 헤더를 대상 서버의 도메인으로 변경
    })
  );
};

여기서 안된다면

target: "http://localhost:5000"을

target: "http://localhost:5000/api"로 바꾸면 해결될 가능성이 크다

changeOrigin 옵션은, 프록시 서버가 클라이언트의 Origin 정보를 변경할 수 있도록 하는데,

"http://localhost:5000"은 백엔드 서버의 루트 경로를 의미하는데, 실제 백엔드 서버에서는 "/api/hello" 경로에 대한 응답을 제공하고 있으므로, api를 붙여줌

"http://localhost:5000"으로 설정했을 때는 changeOrigin 옵션이 적용되지 않아 CORS 정책 문제가 해결되지 않았을 수 있음

[React] 클라이언트에서 CORS 해결하기(http-proxy-middleware)

SOP, CORS에 대해 알아보고 React Client에서 프록시 서버 모듈인 http-proxy-middleware를 이용하여 CORS 에러를 해결했습니다.

https://www.datoybi.com/http-proxy-middleware/