CORS 설정 어떻게 하셨나요?

Question

원래는 백엔드에서 진행 하는걸로 알고 있는데, 간단하게 하기 위해서 프론트쪽에서 설정을 몇 번이고 진행 했는데도 불구하고 계속해서 cors 에러가 납니다. 강의에서는 따로 cors 설정을 하셨던건 안 나온거 같은데, cors 설정 어떻게 하셨는지 질문 드립니다. (vue.config.js) const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: { member: { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/member': '', }, }, }, }, });

bradkim · Answer

강의에서 cors 진행햇습니다~ 프론트는 cors처리할필요없어요

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. ㅌㅇ님. CORS는 보안상의 이유로 API 요청이 클라이언트 도메인과 다른 도메인으로부터 요청될 경우 발생하는 문제입니다. 이를 해결하기 위해서는 서버와 클라이언트 둘 중 한 곳에서 적절한 설정이 필요합니다. 보통 백엔드(Spring Boot)에서 설정하지만, 간단한 경우 프론트엔드(Vue.js)에서 개발 서버의 proxy 설정을 통해 해결할 수 있습니다. CORS 설정 방법 프론트엔드(Vue.js) 설정 : 프론트엔드 개발 서버에서 프록시 설정을 사용하여 백엔드로의 요청을 중개할 수 있습니다. 위에 주신 vue.config.js 의 설정은 적절해 보입니다. 주의할 점은 target URL이 정확한지, 그리고 백엔드 서버가 해당 포트를 열어두었는지 확인이 필요합니다. 백엔드(Spring Boot) 설정 : Spring Boot에서는 @CrossOrigin 어노테이션을 사용하거나 WebMvcConfigurer 를 사용하여 CORS를 설정할 수 있습니다. 예시: &rdquo;`java import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:3000") // 클라이언트 URL .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true); } } &ldquo;` 위의 방법들로도 해결이 되지 않는다면, 강의 관련된 포럼이나 강사님의 예제 코드를 확인해 살펴보실 것을 추천드립니다. 비슷한 문제를 다룬 질문과 답변을 확인할 수 있습니다: Vue.js와 Spring Boot에서 CORS 문제 해결하기 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.