[React] CORS 문제 해결

1. 백엔드한테 해결해달라 하기

2. 프론트 안에서 해결하기

-> webpack.config.ts에서 proxy를 설정해준다.

devServer: {
    historyApiFallback: true,
    port: 3090,
    devMiddleware: { publicPath: '/dist/' },
    static: { directory: path.resolve(__dirname) },
    proxy: {
      '/api/' : { // 프론트에서 api로 보내는 요청은 주소를 3095로 바꿔서 보냄
        target: 'http://localhost:3095',
        changeOrigin:true,
      }
    }
  },

프론트엔드에서 api로 보내는 요청은 주소를 3095로 바꿔서 보내겠다는 뜻이다

-> http://localhost:3095/api/users 대신 /api/users로 줄여서 보낼 수 있다.

 

이렇게 바꿔준 후 꼭 서버를 다시 실행해줘야 한다.

백엔드에서 해결하는 것과 달리 이렇게 수정하면 api 보낼 때 options가 가지 않는다.

왜냐하면 webpack dev server가 localhost:3095(백엔드 서버)인 것마냥 속여줬기 때문이다.

 

하지만 이 방법은 백엔드 서버와 프론트 서버 둘 다 localhost일 때만 사용할 수 있다.

 

이 강의를 들으며 작성했습니다.