http-proxy-middleware로 CORS 에러 해결하기

젬마·2022년 12월 8일
0

codestates

목록 보기
17/18

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

npm install http-proxy-middleware --save

setupProxy.js 파일 작성

//my-app/src/setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    ["/api", "/api2"],
    createProxyMiddleware({
      target: "http://localhost:3080",
      changeOrigin: true,
      router: { "/api2": "http://localhost:3070" },
    })
  );
};

기존에 요청하던 부분에서 도메인 제거

//기존 코드
/*
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();
};
  • 파일을 전부 수정한 후에는 서버와 클라이언트 둘 다 재실행시켜줘야 수정 부분이 반영됨
profile
취준생은 프론트엔드의 꿈을 꾸는가

0개의 댓글