vue3 spring boot cors 설정

Question

prefligt 요청 오류를 해결하기 위해 이와 같이 수정하였고 아래 서버 측에서 해당 요청을 받아 처리하는 것을 확인했습니다.그러나 여전히 CORS 오류가 발생하고 있습니다. WebConfig 설정은 아래와 같습니다. 1. CORS 오류가 서로 다른 포트끼리 통신으로 발생하는거라고 이해했는데 요청은 가고 있고 응답이 안오고 있는 상황이라 원래 서로 다른 포트끼리 요청은 되는데 응답은 못하는 것인지, 아니면 다른 이유가 있는 것인지 알고 싶습니다. 2. prefligt 요청 오류 때문에 헤더를 저런 식으로 달아주었는데 헤더 설정 없이 자동으로 처리할 수 있는 방법이 없는지 알고싶습니다. **현재 통신결과가 200번으로 나오는데 이 경우면 응답을 제대로 받았는데 서버나 클라이언트 쪽에서 처리가 잘못된건지 알고 싶습니다. vue.config.js

개발잡부 · Answer

CORS는 프로토콜, 도메인, 포트 3가지를 모두 봅니다. 셋중 하나라도 불일치하면 발생입니다.이를 be에서 허용해줘야하는데, CORS Registry에서 설정하면됩니다.일단 Origin, Method , Header에 대해서 모두 *로 처리해서 되나 시험해보세요.그리고 하나씩 풀면서 어떤 설정이 문제였는지 알아보면 찾을 수 있을 것 같습니다.

icksss · Answer

vite 로 dev server 띠우지 않나요?cors는 브라우저의 이슈입니다. 따라서, 브라우저가 같은 host와 통신 하는것 처럼 보이게 하면됩니다.아래와 같이 설정을 추가해주세요.vue dev server 는 /api 로 오는 모든 요청에 대해서 localhost:8080으로 보냅니다. 그리고 브라우저에게는 localhost:3000번으로 호출한것 처럼 보이게 해서, cors 이슈를 회피합니다.server: {       proxy: {         '/api': {           target: 'http://localhost:8080'         }, } }

보름 · Answer

AA가 해결해 줄 문제라 별로 관심없이 보아오긴 했지만 제가 공부했을때 기억으로는 header은 관계 없고,@CrossOrigin 어노테이션으로 해결했던 것 같은데 오래전에 공부한거라 기억이....

zuu · Answer

해결했습니다. 헤더도 cors설정 문제도 아니고 WebConfig 경로가 package com.example.demo.config; 였어야 했는데 package config로 설정되어 있어서 스프링 애플리케이션에 등록되지 않은 상태였습니다...경로 수정하니까 클라이언트에서 요청할 때 헤더를 붙이지 않아도 pre-flight가 발생하지 않고 정상적으로 작동합니다.

vue3 spring boot cors 설정

4개의 답변

#vue3 목록