[error] CORS error 해결 방안

# 배경

A서비스에서 로그인 후에 B서비스를 접속하려고 하니까 에러가 발생했다. 에러난 API를 보면 프런트에서 백으로 연결은 잘됐다. 그리고 포스트맨으로 API를 호출해도 잘됐다.

# 현재 상황

http://localhost:3000 - A서비스 http://localhost:3001 http://localhost:3002 - B서비스

이렇게 웹사이트가 켜져 있는 상황이다. 나는 3000에서 3002를 가는 과정에서 CORS error 발생했다.

 

정말 반나절을…. 고생했는데….

 

# CORS(Cross Origin Resource Sharing)

Origin은 url 주소상에서 프로토콜, Domain 이름, 포트까지 포함한 개념이고 예를 들으면 http://localhost:3000 이다. 서로 다른 오리진 간에 리소스를 교환하는 것이 Cross이다.

같은 오리진에서 동일한 곳에서 리소스를 교환하여 보안상 문제가 없다. 하지만 서로 다른 오리진에서 리소스를 교환할 때 검증이 필요한 것이다. A에서 브라우저를 타고 B로 요청한다. B가 응답값을 주면 브라우저가 CORS 허용하지 않아서 에러를 발생시킨다.

CORS 에러는 브라우저 에러이다.

 

해결방안

나는 go를 사용한다.

e := echo.New()
 e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
	AllowOrigins: []string{"http://localhost:3000", "http://localhost:3001", "http://localhost:3002"},
}))

 

AllowOrigins에 “http://localhost:3002” 없었다. 그래서 넣었다. 그리고 다시 해보니까 잘됐다.

끝!