웹 서버를 활용해서 vue와 spring 연동하는중 cors오류 발생

Question

현재 목적은 aws ec2 서버안에 백엔드 스프링부트는 docker로 build해서 돌리게 하고 (이 부분은 성공해서 postman에서 요청시에는 성공적입니다!) 프론트는 nginx를 활용하기로 하였습니다로컬에서 먼저 &#34;npm run build&#34;하고 dist를 ec2서버/var/www/html 안에 이동시켰습니다.nginx는 이미 기존에 ec2에 install해놓은 상태입니다.그렇게하여 ec2 ip주소로 접속하였을 경우 정적 파일들은 잘 나오는 상태입니다. 다만, axios 통신에 있어 계속해서 cors 오류가 발생합니다.스프링부트 config파일에서는 addCors안에서 “localhost:8080&#34;, &#34;(server ip):8080&#34;, &#34;(server ip):3000&#34; 이런식으로 해놓은 상태입니다.사실 이 부분도 제가 이해를 잘 못해서 아무렇게나 해놓은 상황이라고 생각이 드네요..문제를 해결하고 싶습니다, api에 대한 요청은 nginx proxy를 사용해 백엔드쪽으로 넘기게 하도록 하기 위해 nginx의 default설정에 proxy_pass http://{server ip}:8080으로 해놓은 상태입니다찾아보니 nginx에서도 cors관련 설정을 해줘야 한다는 말도 있던데 혹시 도움을 주실 수 있다면 알려주세여 ㅠ..

カワウソ · Answer

리버스 프록시 구성을 했다면 Nginx 에서 CORS를 관리해도 됩니다. 굳이 스프링에 의존할 필요는 없습니다. Allow-Origin 헤더에 여러개의 도메인을 나열할 순 없어보이네요. https://stackoverflow.com/a/12414239

토토땅 · Answer

브라우저(vue)에서 직접 호출 받는 서버에 cors 설정을 해주어야합니다.위 구조에서 vue에서 api를 호출하면 nginx를 통해서 spring을 호출하는 게 맞으신가요? (로그나 브라우저의 API 응답값 등으로 확인)맞으시다면 nginx에서 해주는 게 맞고 그게 아니라면 spring에서 설정을 해주어야합니다.cors는 브라우저에서 차단하는 것이기 때문에 브라우저와 직접 통신하고 있는 서버에서 설정해주어야합니다.

웹 서버를 활용해서 vue와 spring 연동하는중 cors오류 발생

2개의 답변

기술 목록