[Cors 에러] has been blocked by CORS policy 원인 및 해결

CORS = Cross Origin Resource Sharing

 

원인: 도메인이나 포트가 다른 요청을 하는 경우에 발생 한다.

 

나의 경우

Access to XMLHttpRequest at 'http://localhost:8080/signup' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

앵귤러 설정 중 위 에러가 발생 했고, 말 그대로

앵귤러는 4200 포트로 요청하고, 서버는 8080 포트를 사용하기 때문에 포트가 다르다. 그래서 CORS 가 발생한다.

 

 

해결법:

가장 간단한 건 서로 같은 도메인과 같은 포트를 사용하는 것이다.

 

혹은 서버측에서 해당 origin 을 허용 해주는 방법이 있다.

 

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

	@Override
	public void addCorsMappings(CorsRegistry corsRegistry) {
		corsRegistry.addMapping("/**")
				.allowedOrigins("*")
				.allowedMethods("*")
				.maxAge(3600L)
				.allowedHeaders("*")
				.exposedHeaders("Authorization")
				.allowCredentials(true);
	}
} 

 

그래서 코스 매핑으로 처리 했다.