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를 설정할 수 있습니다.
- 예시:
  ”`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);
 }
```
}
“`

위의 방법들로도 해결이 되지 않는다면, 강의 관련된 포럼이나 강사님의 예제 코드를 확인해 살펴보실 것을 추천드립니다. 비슷한 문제를 다룬 질문과 답변을 확인할 수 있습니다:

Vue.js와 Spring Boot에서 CORS 문제 해결하기

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

CORS 설정 어떻게 하셨나요?

CORS 설정 방법