Proxy 를 통해 CORS 에러 해결하기

Proxy

Proxy 는 정석적인 과정 없이 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 우회할 수 있습니다.

• 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달하게 됩니다.
• 여기서 React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저는 CORS 정책을 위반했는지 모르게 됩니다.
• 브라우저를 proxy 기능을 통해 속이는 것입니다.

 

proxy 적용 전 흐름

코드스테이츠 자료출처

 

proxy 적용 후 흐름

코드스테이츠 자료출처

---

Proxy 사용법

Proxy 사용법은 2가지로 나뉜다. 

• webpack dev server proxy
• React Proxy 사용법 

 

webpack dev server proxy 사용

 

package.json

우회할 api 주소를 적어준다. 

....
},
	"proxy" : "http://localhost:3080"
}

 

BookService.js

 기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거해주면 CORS 에러가 해결된다. 

 

//기존 코드
/*
export const getAllBooks = async () => {

    const response = await fetch('http://localhost:3080/api/books');
    return await response.json();
}

export const createBook = async (data) => {
    const response = await fetch('http://localhost:3080/api/book', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({book: data})
      })
    return await response.json();
}
*/

export const getAllBooks = async () => {
  const response = await fetch("/api/books");
  return await response.json();
};

export const createBook = async (data) => {
  const response = await fetch("/api/book", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ book: data }),
  });
  return await response.json();
};

 

 

React Proxy 사용

 

http-proxy-middleware 라이브러리 설치

npm install http-proxy-middleware --save

 

setupProxy.js 파일 작성

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

module.exports = function(app) {
  app.use(
    '/api', //proxy가 필요한 path prameter를 입력합니다.
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력합니다.
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

 

기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거해준다.

export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}

export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}