SOR, CORS

• 자바스크립트는에서의 요청은 기본적으로 서로 다른 도메인에 대한 요청을 보안상 제한한다
  (브라우저는 기본적으로 하나의 서버 연결만 허용하도록 설정되어있다)
• Cross-Origin Resource Sharing(CORS)
  교차출처 리소스 공유 정책
• Same-Origin Policy(SOR)
  동일출처 정책
• 출처(Origin) : Protocol(Https://) + Host(domain주소) + Port(서버 포트번호)
• Protocol(Scheme), Host, Port 이 3개가 동일하면 동일출처로 판단, 출처 비교와 차단은 서버가 아닌, 브라우저가 한다
• CORS 해결책은 백엔드 개발자가 고쳐야한다
  ㅇ SpringBoot CORS설정 추가 예시

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
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")  // 통신할 서버 URL(프론트엔드 등)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true);
    }
}

1. SOR

1) XMLHttpRequest, FetchAPI는 기본적으로 Same-Origin 정책을 따름
(다른 도메인 소스에 대해 ajax 요청 API호출시)
2) SOR은 서버에 있는 리소스는 자유롭게 가져올 수다

2. CORS

1) < img > , < video >, < script >, < link >등은 기본적으로 Cross-Origin 정책을 지원
2) CORS는 서버에 있는 이미지나 유튜브 영상 같은 리소스는 상호작용이 불가능