오늘은 항해 주특기 미니 프로젝트 1일차이다.
1. 프론트엔드와의 협업
주특기 미니 프로젝트는 처음으로 프론트엔트와 백엔드가 협업을 하는 프로젝트이다.
기대되기도 하고 걱정되기도 했었는데 음.. 프론트엔드 2명 백엔드 3명인데 프론트엔드가 할 일이 너어어어무 많다,,
그래서 구현할 수 있는 API를 프론트가 할 수 있는 만큼으로 정해야 해서 백엔드쪽은 구현도 빨리 끝나고 시간도 많이 남을 것 같다.
화요일까지 프론트, 백 다 1차 구현을 끝내기로 했는데 나는 오늘 내가 맡은 기능 구현이 끝났다.
내일부터는 음.. 알고리즘 문제도 풀고 CI/CD도 고민해보고 개인공부를 하면 될 것 같다!
협업 아직 1일차여서 그런지 아직까지는 무난하게 진행된 것 같다. 내일도 열심히 해야지!
2. CORS(Cross Origin Resource Sharing) 에러
내가 맡은 api를 구현하고 서버 배포에 테스트까지 끝마친 상태에서 프론트한테 줬는데 프론트쪽에서 실행하면 network 에러가 났다.
그러면서 CORS 에러도 같이 났는데 찾아보니 프론트엔드에서 백엔드서버로 api 요청을 보낼 때 흔히 볼 수 있는 에러들 중 하나였다.
Origin
- http로 들어오는 것과 https로 들어오는 것은 다른 origin으로 취급된다.
- http는 기본 포트가 80이고 https의 기본 포트는 443인데 이는 생략할 수 있기 때문에 이 포트가 달려 있는 거랑 달려 있지 않는 건 같은 origin으로 볼 수 있다.
- protocal, hostname,port만 완전히 똑같으면 뒤에 pathname 등의 정보는 달라도 같은 origin으로 취급한다.
SOP(Same Origin Policy)
동일 출처 정책(same-origin policy):
어떤 Origin 에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줍니다.
즉, SOP는 다른 origin으로 부터 요청 받는 리소스를 접근제한하는 보안 정책이라고 할 수 있다.
나와 같은 경우는 프론트엔드가 localhost:3000으로 개발 중이고 백엔드 서버는 2.12.334.234라는 퍼블릭 IP주소로 배포를 했다. 이럴 경우 다른 origin으로 취급되어 sop를 위반하게 되는데 이런 상황을 CORS 에러라고 한다.
CORS 에러
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
해결방법은 여러가지가 있었다. 프론트쪽에서도 해결할 수 있도 백쪽에서도 해결할 수 있었다.
해결방법
- 프론트엔드 - proxy server 도임
프론트엔드 서버 말단에 프록시 서버를 도입하여 /api, /api2로 보내지는 요청의 origin을 api의 서버의 origin과 동일하게 만들 수 있다.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};- 백엔드
- CorsFilter 만들어서 filter에서 처리해준다.
- CrossOrigin 어노테이션 사용하기
나는 @CrossOrigin 을 사용하는 방법으로 해결했다. 이 어노테이션은 controller 클래스 단에서 설정할 수도 있고 메서드 단에서 설정할 수도 있다.
@RestController
@CrossOrigin(origins = "http://localhost:3000")
@RequiredArgsConstructor
@RequestMapping("/api/users")
public class UserController {
....
}origins 속성을 설정하여 localhost 3000번 포트만 열어주었다.
-끄읕-
