AWS 배포 시 CORS 에러
"[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스강의" 를 수강하고 배포 부분을 이 강의를 수강하고 있는 수강생입니다. 고농축 강의에서 만든 포트폴리오를 aws에서 배포했을때에, CORS 에러가 다음과 같이 나는 문제가 있는데 어떻게 해결해야할까요? 찾아보니 백엔드에서 CORS 를 허용해야하거나 프론트에서 프록시를 사용하라고 되어있는데 어떻게 해결해야할지 모르겠네요

답변 2
0
안녕하세요! aasfa님!
해당 과정의 프론트엔드 배포 수업까지 잘 따라오셨군요! 축하합니다!^^
다만, API 요청에는 실패하셨을 텐데요!
이는, 기존에 제공되고 있는 백엔드API에서 assfa님의 도메인을 허용해 놓지 않았기 때문이랍니다!
로그인 관련된 보안 설정으로 현재 localhost:3000 포트(3001도 안됨)만 허용이 되어 있답니다!
따라서, 프론트엔드과정은 잘 따라오신 것이 맞으며, 추후 팀프로젝트 또는 회사에서 개발을 진행하신다면 해당 도메인의 CORS를 허용해 달라고 백엔드 개발자에게 요청하면 된답니다!^^
0
안녕하세요, 인프런 AI 인턴입니다.
aasfa님, AWS에서 배포 시 발생하는 CORS 에러를 해결하기 위해 몇 가지 방법을 고려할 수 있습니다.
- 백엔드에서 CORS 설정하기:
백엔드에서 특정 도메인에서의 요청을 허용하도록 CORS 설정을 해야 합니다. Spring Boot를 사용 중이라면@CrossOrigin어노테이션을 사용해 특정 엔드포인트에 대한 CORS 설정을 할 수 있습니다. 또한, 글로벌 CORS 설정은WebMvcConfigurer를 통해 할 수 있습니다.
”`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(proxyBeanMethods = false)
public class MyCorsConfiguration {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("https://your-frontend-domain.com");
}
};
}
}
“`
Global CORS configuration in Spring Boot에서 더 자세한 정보를 확인할 수 있습니다.
프론트엔드에서 프록시 사용하기:
만약 백엔드 설정 변경이 어려운 경우, 프론트엔드 개발 서버에서 프록시 설정을 통해 백엔드 서버로의 요청을 프록시할 수 있습니다. 이를 통해 동일 도메인 정책을 우회할 수 있습니다.배포 설정 수정:
AWS에서 제공하는 서비스들 간의 설정을 통해 CORS 문제를 해결할 수도 있습니다. 예를 들어, AWS API Gateway를 사용 중이라면 CORS 설정을 콘솔에서 직접 할 수 있습니다.
이미지에서의 네트워크 로그를 보았을 때도 CORS 에러가 발생한다고 하셨으니, 백엔드 설정을 먼저 확인해보시고, 필요하다면 프론트엔드 쪽에서도 고려하시는 것을 추천드립니다.
더 궁금하신 부분이 있으면 언제든지 질문해 주세요.
Spring Boot Reference Documentation - CORS Support
0
본 강좌는 프론트엔드 강좌이고, 백엔드 서버는 강의에서 제공해주는 건데, 백엔드 설정을 건들여야 한다면, 강의에서 제공하는 백엔드 서버를 사용하는 포트폴리오는 배포할 수 없다는 말인가요
11강 23:35부터 막혀서 질문 드려요.
0
72
2
API 주소
0
83
1
하이브리드앱 과제 레퍼런스 코드
0
107
2
조건문, 반복문 너무 어려움
0
94
1
고농축 백엔드와 완벽한 프론트 강의 차이?
0
113
2
flex를 grid 처럼 만들기 질문드립니다.
0
93
2
유저 포인트 관련해서 질문 드립니다
0
69
1
npx create-react-app
0
93
1
fetchTravelproductsIPicked 관련 질문 드립니다
0
81
2
강의에서 사용하는 api 접속 불가
0
101
2
강의 커리큘럼에 대해 질문이 있습니다.
0
102
2
윈도우 -> 맥 파일 옮기기 / 실행
0
125
1
fetchUser 요청시 userPoint.amount
0
62
2
npm 배포 후 import 시 오류사항
0
90
2
koreanjson 관련 사이트가 접속이 안되요
0
66
2
17강 질문
0
84
2
tailwinde-css
0
72
2
04-02 Next 페이지 이동
0
78
2
[CSS&JS 마스터]공부하는 속도, 코드 리뷰
0
80
2
GRAPHQL 활용 과제
0
79
2
노란색 경고줄
0
51
1
181. [02-04] setState의 원리 질문
0
60
2
graphql 관련 질문입니다
0
62
2
node.js 설치방법
0
160
1





