[그룹 스터디 프로젝트] 여덟 번째 미팅 - Really Almost there!! :'D (0511)

회의록

[해야할 일]

백엔드
1. 이미징 처리 관련 백엔드 수정 필요.
2. AWS 프론트엔드 CORS관련 수정 확인 필요.

프론트엔드
1. 이미지 등록 부분 백엔드랑 연동
2. AWS 프론트엔드 서버 CORS 관련한 이슈 확인 필요.

[특이사항]

팀전체
1. 소셜 로그인 기능 구현 미완성.
2. 몸무게 그래프 관련한 로직 구현 미완성.
3. 이미지 추가 부분 - 고양이 및 게시글 - 구현 미완성.

[계획]
1. 빠른 시일 내에 부족한 부분을 생략 및 마무리 하고 실제 AWS서버에 정상적으로 배포.
2. 고생한 본인의 어깨 토닥토닥 해주기

 

회의 추가 설명

우리의 비교적 기나긴(?) 여정이 끝나가고 있다!

React.js의 R자도 모르던 내가 어느 정도 자신감을 얻게 된 프로젝트여서 ㅠㅜ 

너무 열심히 같이 으쌰으쌰 잘 해주신 팀원들께 무한한 감사를 드린다.

 

1. 이미지 등록 부분

- 이 부분은 File을 백엔드에 건네는 부분까지는 구현이 되었는데, 뭔가 넘기면 에러가 난다!

- 백엔드 팀과 협업해 문제 해결할 것.

 

2. CORS 뜸!

- 이 부분이 우리를 다시 멘붕에 빠뜨렸는데...

- 진정 CORS는 CURS(E)인가?!?

 

- 하지만 하루 뒤 오늘!! 해결을 했으니...ㅎㅎ

 

기존 문제

- Preflight Request에서 "Access-Control-Allow-Origin" 헤더가 없어 CORS 에러가 뜬다는 경고가 나왔다.

 

문제를 해결해보려는 우리의 노력

- 저 헤더가 있으면 해결되는 문제이므로

- cors-anywhere 코드를 fork해와 heroku 프록시 서버를 만들고, API 리퀘스트 주소 앞에 proxy server 주소를 prefix 해보았더니!!

- Preflight Request는 통과를 하는데 :'D

- 본 Request에서 403 Forbidden 에러가 떴다!!! 무엇이냐!!

 

문제 해결

- 403 Forbidden에러를 해결해도 좋겠으나 (이 부분은 리퀘스트를 보내는 Origin주소가 제대로 서버쪽에 입력이 안 되었을 지도 모른다고 추측...!)

- 그 부분을 해결해도 Preflight Request 에러 부분을 고치려면 Proxy Server를 써야되고

- Proxy Server를 써야 연동이 된다는 것 자체가 노노 였으니

- Preflight Request에서 나는 에러를 고치는 데 우선 순위를 두었다!

 

- 우리를 구제해주신 블로그 글

oddpoet.net/blog/2017/04/27/cors-with-spring-security/

CORS 설정과 Spring Security

 

- 스프링 시큐리티 설정의 문제였고

- 블로그 글과 같이 @Configuration안에 http.requestMatchers(CorsUtils::isPreFlightRequest).permitAll()

을 넣어주니 에러가 해결되었다!!!!! 우와!!!!!

 

HS님께서 공유해주신 수달님의 힘인것인가?

 

3. 남은 부분

- 이제 CORS문제도 해결되었으니,

- API에 문제가 있는 부분들을 고치고, 프론트에서 연동되게 만들고 자잘한 에러들을 고치면 완성이다!

- 말은 완성이지만 개선해갈 점도 많으니, 차차 하나씩 기능을 추가함 좋을 것이다