CORS 에러란

• Cross-Origin Resource Sharing의 줄임 표현이다.

• 교차 출처 리소스 공유 정책이라고 해석된다.

• 출처(Origin)가 다른것을 말한다

  	- 출처(Origin)란?
  		- 우리가 흔히 쓰는 url은 여러 구성 요소로 이루어져 있다,
   ![](https://velog.velcdn.com/images/mosoo21/post/4ade8f12-b3bd-41a5-9692-585d5755e3cb/image.png)
  	- Protocol(Scheme) : http, https
      - Host : 사이트 도메인
   	- Port : 포트 번호
      - Path : 사이트 내부 경로
      - Query String : 요청의 key와 value 값
      - Fragment : 해시태크
      * Origin : Protocol + Host + Port

• 기본적인 요청 정책

  • img, video, script, link 태그 등
    • 해당 태그들은 기본적으로 Cross-Origin 정책을 지원한다.
    • 그래서 해당 태그의 href, src 등을 통해 다른 리소스에 접근이 가능하다
  • XMLHTTPRequest, Fetch Api 스크립트
    • 기본적으로 Same-Origin 정책을 따름
    • 다른 도메인 소스에 대한 api 요청 시 CORS 에러가 난다.

• 동일 출처 정책이 필요한 이유는

  • CSRF(Cross-Site Request Forgery), XSS(Cross-Site Scripting)등을 통해서 사용자 데이터를 탈취하는게 가능하기 때문이다.

• 출처(Origin) 비교는 서버쪽에서 하는게 아니라 브라우저 구현 스펙이다

  • 하지만 결과론적으로 보면 서버에서 처리 해주는게 맞다.
  • 왜냐하면 클라이언트에서 http 요청 헤더에 Origin을 담아서 보내면
  • 서버에서 응답헤더에 Access_Control-Allow-Origin을 담아서 클라이언트로 보낸다.
  • 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교
  • origin과 access-control-allow-origin을 비교해서 유효하지 않으면 CORS에러
  • 유효하면 정상적으로 다른 출처(origin)을 가져온다.

• 공통으로 SpringBootApplication에 @EnableWebMvc를 추가해주고

• Spring boot에서는

@Configuration
public class WebConfiguration implements WebMvcConfigurer {

    @Value("${bncp.allow.origins}")
    String[] allowedOrigins;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOriginPatterns(allowedOrigins);
    }
}

이런식으로 allowedOrigins를 해당 어플리케이션의 origin을 설정해주면 된다.

• spring boot와 jsp 사용 시

@Configuration
public class WebConfiguration implements WebMvcConfigurer {

    @Value("${bncp.allow.origins}")
    String[] allowedOrigins;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins(allowedOrigins);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
    }
}

• 출처 https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F