CORS에 관하여

 

💡 Cross-Origin Resource Sharing(교차 출처 리소스 공유)

 

💡 Origin(출처)

console.log(location.origin);

URL의 형태. 위 코드로 알 수 있음.

 

💡 SOP(Same-Origin Policy)

같은 출처에서만 리소스를 공유할 수 있다

 

출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

CORS는 브라우저의 구현 스펙에 포함되는 정책이다. (IE는 Origin 체크 시 포트까지 한다)

 

💡 예방되는 공격

CSRF(Cross-Site Request Forgery)

XSS(Cross-Site Scripting)

 

💡 관련 에러메세지

에러로그

Access to XMLHttpRequest at 'http://localhost:8080/api/food/getTest' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Front의 요청 Origin과 Back의 응답의 Origin이 다를 때나는 에러이다.

 

💡 해결

Back단(Spring Boot)에서 CORS설정을 해준다

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") 
        //CORS를 적용할 URL패턴을 정의
                .allowedOrigins("http://localhost:8080", "http://localhost:8081") 
                //자원 공유를 허락할 Origin
                .allowedMethods("GET", "POST");
                //허용할 타입 
}