카테고리 없음

[CORS] spring boot docker 배포 > CORS 문제

J-Chris 2022. 7. 30. 19:22

CASE.

웹 클라이언트에서 로그인 관련 api를 요청했다

회사 서버인 http://192.168.0.232:8008로 접속을 시도했다.

그런데 웹에서 CORS 에러가 발생한 것이다.

원인이 무엇이고, 해결방법(전략)을 생각해보았다.

 

원인

- Vue 애플리케이션과 서버 애플리케이션을 분리해서 개발하고 각각을 별도의 포트로 운영하게 되는 경우 CORS 발생

- 핵심은 Vue 애플리케이션과 서버 애플리케이션의 도메인과 포트가 다르기 때문에 발생

 

 

해결방안

1차: Vue 프록시 서버를 통해서 CORS를 해결해보고자 한다.

- 1) vue.config.js에 url을 http://192.168.0.232:8008로 한다

- 2) vue에서 axios.post(url, ..)에서 url을 http://192.168.0.232:8007/api/signup 이런 식으로 url을 수정한다

 

2차: Nginx 서버를 통해서 CORS를 해결해보고자 한다.

- 이유: vue.config.js의 devServer에 proxy를 설정할 경우, 개발 환경에서는 정상적으로 수행되지만, 운영환경에서는 실행되지 않게 됩니다. CORS를 정확히 해결하려면 결국 서버에서 처리해야 됩니다.

 

Access-allow-origin : " * " 을 하는 방법은 좋은 방법이 아니라고 한다. 

왜냐하면 모든 웹 사이트 허용을 하면 보안상으로 위험할 수 있기 때문이다.

 

What I learned.

- nginx DDDd