Vue.js - spring // CORS 에러

Question

React - spring Boot로 연동하여 게시판을 만드는 토이프로젝트를 진행할때는 CORS 에러를 본적이 없습니다..독학과정에서 Spring으로 API를 만들어 Vue로 API를 요청하는 과정에서 CORS 에러가 생기어 문제가 되었습니다.일단 Vue3 를 사용하고있고spring에서 CrossOrigin &#64; // 어노테이션을 사용하여 vue쪽의 포트를 열어주는 방식,spring에 Webconfig 클래스를 만들어 origin을 열어주는 방식 ,vue.config.js 내 devServer 를 추가하여 프록시를 생성해서 요청하는방식,https://steady-coding.tistory.com/616 블로그를 참조하였습니다하지만 annotation 이 활성화 되지않아 4.1.9버전 스프링 라이브러리에서 사용할수 없다는 결론이 나서 (이전버전 4.1.9)4.2버전으로 library를 추가한 상태이구요. 어노테이션 자체는 활성화가 되었지만 똑같은 오류가 반복됩니다(Vue.js의 html에서 Spring으로 요청 시 Cors에러 반환)그래서2번 방식인 WebConfig 클래스를 생성하는 과정에서&#64;Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(&#34;/**&#34;).allowedOrigins(&#34;http://localhost:8081&#34;, &#34;http://localhost:8080&#34;) // 허용할 오리진을 설정.allowedMethods(&#34;GET&#34;, &#34;POST&#34;, &#34;do&#34;, &#34;ajax&#34;).allowedHeaders(&#34;Origin&#34;, &#34;Content-Type&#34;, &#34;Accept&#34;).allowCredentials(true).maxAge(3000);인자로 들어오는 CorsRegistry 부분이 CorsRegistry cannot be resolved to a type 라는 오류와 함께클래스 생성이 제한되고있어서 선배님들께 도움받고싶습니다 ㅠㅠ참고로 vue.config.js에 프록시를 생성하는 방식 또한 제가 잘 못하고있는건지 그대로 따라하여서 /api/~~ 로 요청을 하여도 8080으로 요청해야할 api를 8081로 요청하고 있습니다.악명높다는 CORS에러를 만나버렸습니다 도움바랍니다 ㅠ.ㅠ

icksss · Answer

devServer를 사용중이면 proxy를 설정이 되어 있을텐데. 왜 cors가 날까요?proxy 설정이 제대로 되어 있다면, 서버에서 CORS 설정을 안해도 아무 문제가 안되요.

icksss · Answer

지금 환경이 어떻게 되어 있는지 궁금하긴 한데.. 1.번 인지.. 2번인지.. 3번인지..보통 Client 개발시에 사용하는 환경브라우저(vue.js client : vue2,3 상관없음) -> devServer(Client Server) -> api Server (Spring)브라우저 -> api Server(Spring)Client 개발 후 배포를 위한 npm build 후 dist 의 내용을 Spring 서버의 static에 넣어놓은 환경브라우저 -> Web Server(Nginx or Apache2) -> api Server(Spring)Web Server(Ngnix or Apache2)의 설정으로 api Server forward 처리되고 있는 환경1.번 이라면 devserver 의 proxy 설정으로 cors 회피2.번 이라면, Spring 에서 Cors 설정 추가로 회피3.번 이라면, 아무것도 안해도 Cors 회피

icksss · Answer

babel.config.js 는 babel에 대한 설정입니다.babel 은 cors랑은 관계가 없구요. 크로스브라우징 과 관계가 있습니다.vue.config.js 가 있을것 같은데요. vue cli는 npm run serve 가 동작 한다면, package.json 에 요런식으로 되어 있을꺼예요"scripts": { "serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint" },vite 를 쓴다면 요런식일꺼구요"scripts": { "dev": "vite","build": "vite build" },package.json 의 devDependencies 부분에 아래와 같은 모듈이 있다면 devServer 사용이 가능한 겁니다."@vue/cli-service": "^4.1.0",글을 읽다보니, 빌드전 개발할때의 설정인건지.. 빌드후 배포 후 현상인건지 헷갈리네요.설정은 빌드전 개발환경에 대한 내용 같고, 증상은 빌드후 배포된 내용 같아요.!!! 이 모든건 개발 시에 사용되는 환경입니다. 빌드를 했고, dist로 나온 output 소스를 웹서버 아래에 두었다면, 의미 없습니다.코드안에 api 주소를 모두 포함해서 보내고 있지 않다면, Request는 소스를 받은 서버쪽으로 무조건 보내 겠죠.

Vue.js - spring // CORS 에러

3개의 답변

Q&A 목록