CORS는 웹서비스를 개발하다가 항상 부딪히는 문제이다. Vue를 이용한 간단한 서비스 개발 과정을 정리하다 역시 부딪혔다. 별도의 Severless 혹은 자체 Server가 없기 때문에 이를 해결하기 위해서 정말 쉽고 빠르게 CORS를 우회하는 Router를 만들어보았다.

이번엔 golang 공부!

bycors (Bypass CORS Router)

이 주제는 vue.js와 완전 별개로 CORS를 지원하지 않는 네이버(사실 대부분 보안상 지원하지 않으니^^;) 때문에 갑작스럽게 별도 프로젝트를 짧고 간단하게 아래와 같이 수행한다.

일단 나의 개인 서버에 올리면 자주 꺼질 수도 있고 유지를 해야되니, https://devcenter.heroku.com/articles/getting-started-with-go를 기반으로 Heroku에 올리려 한다. 아직 golang도 초보고 heroku도 처음 사용하니 가장 기초적인 기능으로 api routing 정도만 구현하였다.

bycors golang 서버

https://github.com/lubang/bycors

go로 작성되었을 뿐 X-API-TARGET 이란 헤더가 있으면 해당 주소로 모든 Headers, Body를 그대로 by-pass 하는 기능만 제공한다. 상세한 내용은 코드를 살펴보면 좋다. 달랑 main.go 한 개 :)

main.go 중 일부

func main() {
	port := os.Getenv("PORT")
	if port == "" {
		log.Fatal("`$PORT` must be set")
	}

	router := httprouter.New()

	router.NotFound = http.FileServer(http.Dir("public"))
	router.OPTIONS("/route", routeAllowed)
	router.POST("/route", routeCors)
	router.GET("/route", routeCors)
	router.PUT("/route", routeCors)
	router.DELETE("/route", routeCors)

	log.Fatal(http.ListenAndServe(":"+port, router))
}

func routeAllowed(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
	keys := reflect.ValueOf(r.Header).MapKeys()
	strkeys := make([]string, len(keys))
	for i := 0; i < len(keys); i++ {
		strkeys[i] = keys[i].String()
	}
	headres := strings.Join(strkeys, ",") + ", X-Naver-Client-Id,X-Naver-Client-Secret,X-TARGET-URL"

	w.Header().Set("Access-Control-Allow-Origin", "*")
	w.Header().Set("Access-Control-Allow-Methods", "*")
	w.Header().Set("Access-Control-Allow-Headers", headres)
}

bycors에서 가장 중요한 부분은 CORS 처리를 위해서 응답 헤더에 Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 이 3가지를 추가해주는 일이었다.

heroku에 배포하기

간단히 서버는 만들었다. 이제 heroku에 간단히 배포를 하자. 느리지만 무료인데다 사용성도 너무 편리하다. getting-started를 참고해서 heroku 로그인 후 다음과 같이 서비스를 생성하였다.

$ heroku login 
$ heroku create bycors
$ git push heroku master

단 3줄이면 구성 & 배포가 완료된다. 이렇게 쉽게 배포가 가능하다니 heroku 최고! 하지만 역시 heroku 답게 속도는 지독히 느리다. 약 4.6초가 소요되었다. 이미지를 주고 받는 시간이 오래걸리는 것으로 예상된다.

bycors API 사용하기

  • Address: https://bycors.herokuapp.com/route
  • Request
    • Headers
      • X-Naver-Client-Id
      • X-Naver-Client-Secret
      • X-TARGET-URL
    • Payload (form-data)
      • image: 이미지 파일
  • Response
    • Naver Clova 응답 그대로 반환

bycors-api-result

최대한 간단하게 만든 서비스로 사용법도 간단하다. 철저하게 become-a-celeb 서비스 시험을 위한 용도이다. 시간나면 General 하게 모든 CORS를 Routing 하는 서비스로 업데이트 해봐야겠다.