Unit12 - Coz’ Mini Hackathon

서버와 클라이언트의 개념

서버는 ‘제공하는 주체’

클라이언트는 ‘제공 받는 대상

 

서버의 종류

웹 서버

• 웹 서비스를 제공하기 위한 서버 컴퓨터

 

웹 애플리케이션 서버

• 웹 애플리케이션을 제공하기 위한 서버 컴퓨터

 

데이터베이스 서버

• 데이터베이스를 제공하기 위한 서버 컴퓨터

 

파일 전송 서버

• 대용량의 파일을 빠르게 주고 받기 위한 서버 컴퓨터

 

메일 서버

• 메일 서비스를 위한 서버 컴퓨터

인쇄 서버

• 공간의 제약을 극복하고 인쇄를 할 수 있도록 하는 서버 컴퓨터

프론트 개발자는 개발 웹 서버에 개발 내용을 적용하고 백엔드 개발자는 개발 웹 애플리케이션 서버에 개발 내용을 적용

---

CORS 정책

교차 출처 리소스 공유

브라우저는 SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만, CORS를 사용하면 접근 권한을 얻을 수 있게 되는 것

 

CORS 정책 동작 방식

프리플라이트 요청 (Preflight Request)

실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것을 의미

 

단순 요청 (Simple Request)

단순 요청은 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것

 

인증정보를 포함한 요청 (Credentialed Request)

요청 헤더에 인증 정보를 담아 보내는 요청

.출처가 다를 경우에는 별도의 설정을 하지 않으면 쿠키를 보낼 수 없다.=>민감한 정보

프론트, 서버 양측 모두 CORS 설정이 필요

 

CORS 정책이 필요한 이유

실제 서비스가 되는 상용 앱을 운영 중이라면, DB에는 라이브 데이터(live data)가 쌓인다.

라이브 데이터는 민감성이 높은 데이터들이기 때문에 보안이 중요하다.

모든 출처의 접근을 허용하면 보안성이 낮아지고 해킹의 위험에 그대로 노출된다.

모든 출처의 접근을 허락해서는 안된다.

=> CORS 정책 필요

 

프론트엔드에서 CORS 정책을 우회하는 방법

• Webpack Dev Server에서 제공하는 proxy 기능을 이용하는 방법
• http-proxy-middleware 라이브러리를 깐 뒤 해당 라이브러리에서 제공하는 proxy 기능을 이용하는 방법
•  

백엔드에서 CORS Error를 해결하는 방법

Java 코드

origins 뒤로 오고 있는 특정 도메인에 대해서만 허용

retrieve()와 remove() 메소드 둘 다 특정 도메인에 대해 허용

 

Spring Framework를 사용하여 작성된 RESTful API 서비스

@CrossOrigin(origins = "http://example.com")
//@CrossOrigin(origins = "http://example.com") 어노테이션은 
//CORS (Cross-Origin Resource Sharing) 정책을 적용하기 위한 것
@RestController
@RequestMapping("/account")
public class AccountController {
    //@RestController 어노테이션은 해당 클래스가 RESTful 웹 서비스의 엔드포인트임을 지정하는 역할
    //이 클래스는 RESTful API 엔드포인트를 제공하는 AccountController

    @RequestMapping(method = RequestMethod.GET, path = "/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }
    

    @RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
    //@RequestMapping 어노테이션은 
    //URL 경로와 HTTP 요청 메소드 (GET, POST, PUT, DELETE 등)을 지정하는 데 사용
    //GET 요청에 대해 retrieve 메소드를, DELETE 요청에 대해 remove 메소드를 실행
    
    
}

class 안의 retrieve() 메소드 위에 @CrossOrigin을 붙여줌으로써 retrieve() 메소드만 허용

이렇게 붙이게 되면 모든 도메인, 모든 요청방식에 대해 허용하게 된다

@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin
    @RequestMapping(method = RequestMethod.GET, path = "/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

 

글로벌 CORS 설정

.cors(withDefaults())일 경우, corsConfigurationSource라는 이름으로 등록된 Bean을 이용

 

setAllowedOrigins()을 통해 출처(Origin)에 대해 스크립트 기반의 HTTP 통신을 허용하도록 설정합니다. 현재 *로 되어 있으므로, 모든 출처에 대해 허용하겠다는 의미

setAllowedMethods()를 통해 파라미터로 지정한 HTTP Method에 대한 HTTP 통신을 허용

 

백엔드에서 API를 작성하는 방법