{"id":226,"date":"2021-02-22T01:50:05","date_gmt":"2021-02-22T01:50:05","guid":{"rendered":"https:\/\/vernonkeenan.com\/?p=226"},"modified":"2021-05-30T14:41:14","modified_gmt":"2021-05-30T21:41:14","slug":"i-had-a-go-cors-and-single-page-app-ordeal-so-you-dont-have-to","status":"publish","type":"post","link":"https:\/\/cms.salesforcedevops.net\/index.php\/2021\/02\/22\/i-had-a-go-cors-and-single-page-app-ordeal-so-you-dont-have-to\/","title":{"rendered":"I had a Go, CORS and Single Page App Ordeal So You Don\u2019t Have To"},"content":{"rendered":"\n

Microservices are awesome, until you need to serve them up in a Single Page Application (SPA). That\u2019s when you need to tame the CORS (cross-origin resource sharing) beast so your fancy new microservices can actually be used by front-end developers.<\/p>\n\n\n\n

Don’t Have a CORS Ordeal<\/h2>\n\n\n\n

I just spent days on this one, so I thought I’d relay how my final solution works. In my case, I have a swagger-first approach to API development, where I feed a YAML file into go-swagger<\/a><\/code> and then go-swagger<\/code> generates a REST server framework. This works great with lots of microservices that don’t have any problem communicating using HTTP.<\/p>\n\n\n\n

The problem we encountered was using Angular<\/a> to make a single-page web application that would then use the APIs directly in the browser. That’s when CORS<\/a> comes into play. I couldn’t get the headers to work right in Go using the go-swagger<\/code> framework.<\/p>\n\n\n\n

\"young
Photo by Andrea Piacquadio on Pexels.com<\/a><\/figcaption><\/figure>\n\n\n\n

Making CORS Work!<\/h2>\n\n\n\n

I have a swagger-first, also known as an OpenAPI standards<\/a>, approach to API development. This is where I feed a YAML file into and then go-swagger<\/code> generates a REST server framework. This works great with lots of microservices that don’t have any problem communicating using HTTP.<\/p>\n\n\n\n

I could access my microservices externally on a server-to-server basis using api-umbrella<\/code><\/a> as a API gateway. I even think I may have been able to solve my CORS problem with api-umbrella<\/code> configuration, but I didn\u2019t see it.<\/p>\n\n\n\n

I had this problem with Angular, but anyone can have a CORS ordeal when you connect any new REST service to a JavaScript SPA.<\/p>\n\n\n\n

My Toolchain<\/h2>\n\n\n\n

We all get attached to the chain of events that goes from a source code change to finished deployments. I needed my solution to work with a simple API gateway, like api-umbrella<\/a><\/code>. Fancy solutions like AWS API Gateway don’t work for me due to lock-in and cost issues.<\/p>\n\n\n\n

In a nutshell, here are the steps I use to build a microservice:<\/p>\n\n\n\n

  1. Hand-write the swagger (OpenAPI v2) file in YAML<\/li>
  2. Use go-swagger to generate the REST server<\/li>
  3. Update the code to implement handler functions<\/li>
  4. Test in VS Code<\/li>
  5. Use Drone CI\/CD<\/a> to generate Docker images in a private registry<\/li>
  6. Use docker-compose to orchestrate service startup on a private host, in a private VPC, and in a private datacenter<\/li>
  7. Deploy api-umbrella<\/code> as a the API gateway between public URI’s and the backend host<\/li><\/ol>\n\n\n\n

    The Journey To Victory<\/h2>\n\n\n\n

    After quite a journey, I finally came upon the solution at the swagger docs<\/a>. The real trick in taming CORS, though, is to handle the “pre-flight” checks a web client makes before the actual REST method is invoked.<\/p>\n\n\n\n

    The solution for us is to create an OPTIONS <\/code>method and write the response methods for them in Go using the go-swagger<\/code> framework.<\/p>\n\n\n\n

    \"man
    Photo by Andrea Piacquadio on Pexels.com<\/a><\/figcaption><\/figure>\n\n\n\n

    Make a swagger YAML file<\/h3>\n\n\n\n

    This sample OpenAPI (swagger) YAML file is a very simple representation of a single endpoint REST server with two methods.<\/p>\n\n\n\n

    To get acquainted with this swagger definition, please note that I’ve used references rather heavily throughout the file. For example, if you look at the GET \/coordinate<\/code> path definition, you’ll see a reference to #\/responses\/CoordinateResponse<\/code>. <\/p>\n\n\n\n

    Look in the responses section of the file, and you’ll see where CoordinateResponse<\/code> includes both a JSON response body and header definitions.<\/p>\n\n\n\n

    Another handy definition in the responses section of the swagger file is CORSResponse<\/code>, which is used to define the OPTIONS \/coordinate<\/code> response.<\/p>\n\n\n\n