배경

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” 없었다. 그래서 넣었다. 그리고 다시 해보니까 잘됐다.

끝!