[모각코 5회차] SPA와 CORS

목표: spa와 cors 정리

Single Page Application

화면 렌더링 서버에서 처리하지 않고 브라우저에서 처리

• 일반: 모든 페이지 다시 렌더링
  • 사용자 세션 서버에서 관리
  • 쿠키에 담아서 보냄
  • 정보 추가 할 때마다 세션 커짐
  • 요청받는 url에 따른 리소스 반환
  • 웹 어플리케이션 서버

• spa: dom 조작해서 특정 영역 렌더링
  • 사용자 데이터 모델 일부 자바스크립트로 관리
  • 로컬스토리지에 담아둠
  • 필요할 때마다 데이터 요청
  • html5 히스토리 api 이용가능
  • 서버는 뷰를 렌더링하지 않게 됨 -> json
  • 웹 서버

ResponseEntity 보냄

    @ResponseBody
    @GetMapping("/api/v1/customers/{customerId}")
    public ResponseEntity<Customer> findCustomers(@PathVariable("customerId") UUID customerId) {
        Optional<Customer> customer = customerService.getCustomer(customerId);
        return customer.map(ResponseEntity::ok).orElse(ResponseEntity.notFound().build());
    }

CORS(Cross-origin resource sharing)

어플리케이션은 다양한 호스트에 접근하여 데이터를 가져옴 -> 보안중요 -> 동일한 origin의 리소스에만 접근 가능 -> CORS는 http 헤더를 이용해서 다른 origin 접근 가능하게함

• same origin이란?
  • 호스트 프로토콜 포트가 동일한 출처
  • http://www.moon.com 접근시
  • https://www.moon.com 프로토콜 다름
  • http://www.moon.com:81 포트 다름
  • http://www.qwer.com 호스트 다름

• 단순요청이 아닌경우 예비요청(접근 허용) -> 본요청

• CORS 정책 에러 해결1 (서버와 클라이언트간의 에러)

  • package.json에 "proxy":"http://localhost:8080"
  • axios.get('http://localhost:8080/order/api/v1/customers')를
  • axios.get('/order/api/v1/customers')로-> 웹서버에 요청보냄(동일 호스트)

• Spring에서 CORS

    //WebMvcConfigurer구현 클래스
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedMethods("GET","POST")
                .allowedOrigins("*");
    }
  
    //특정 컨트롤러 또는 메서드에 적용 가능
    @CrossOrigin(origins = "*")

CORS
@프로그래머스 미니 데브코스 & CNU SW Academy 강의 내용 정리