[React] CORS로 인한 proxy 설정 그리고 axios요청보내기

프론트랑 백의 포트번호가 다르면 OPTIONS라는 요청이 또 간다.
이것이 CORS에 대한 요청이다.

 

 

이것에 대한 해결 방법

 

       전제: 

       프론트의 주소: http://localhost:3090

       백의 주소:  http://localhost:3095

 

 

       백: 

       (노드의 경우)

app.use(
  cors({
    origin: true,
    credentials: true,
  })
);

이렇게 설정을 해준다.

 

 

프론트: 

devServer: {
    port: 3090,
    publicPath: '/dist/',
    proxy: {
        '/api/': {
            target: 'http://localhost:3095',
            changeOrigin: true,
        },
    },
},

 

       💡 이렇게 프록시를 설정 해주면 같은 포트번호인 것 처럼 속여줬기 때문에 같은 도메인끼리 소통한 것 처럼 인식하여 OPTIONS 요청을 안보낸다.

 

      💡 Web pack 데브서버가 CORS문제를 피해갈 수 있게 도움을 준다. 

 

      💡  프론트 백 둘 중 하나만 조치를 취해줘도 되고 둘 다 취해줘도 된다. 방법은 조금 달라질 뿐이다.

                  ex) 백에서 CORS 조치를 취해주면 프론트에서 axios로 요청을 보낼 때 밑에 처럼 해줘야 한다.

axios.post('http://localhost:3095/api/users', {  ...  }  

 

       ※ 서버랑 프론트 둘 다 로컬호스트일 때만 프록시 설정 가능.

 

 

axios요청 보낼 때 주의사항

 

       axios.post('http://localhost:3095/api/users', {  ...  }     이 의미는 (포트번호) 3090 -> 3095 로 보낸다는 것이고

 

       axios.post('/api/users', {  ...  }     이 의미는 (포트번호) 3095 -> 3095 로 보낸다는 것이다.