How LiveAPI Taught me some important Lessons in engineering

I have been working on a product named LiveAPI. Let me just give an idea of what this product does.

The above API doc is a static one, users cant execute and change things by themselves.

Static API docs like these often lose customer attention before the developers even try the APIs.

The above API Doc uses LiveAPI, here developers can execute these APIs instantly right within their browser, so that developer attention can be captured within the first 30 seconds of their visit.

LiveAPI uses a WASM Binary and a language core for executing the APIs. These things are already built up and we started testing this on some httpbin URLs, everything seemed fine

When we tried doing a GET request to www.google.com, it failed.
We investigated further and found out that there was a CORS error going on.

CORS error prevents us from making requests from one site to another site.
But this is a vital thing, because we are always requesting from one site(API docs) to another site(the target API url).

So we thought for a while on this issue, and an idea popped up. How about we use proxyservers? This is a potential solution to this problem and will get us back up and running. Let's see how proxy servers can be a useful approach.

Learning about Proxies: Engineering a Solution for CORS-Free browser requests

What is a proxy server?

Consider this example.
Here you can see two people, Alice and Bob. In the middle there is a proxy.

Alice asked the proxy to forward a message to him, Bob also does the same.
The proxy acts as the middleman here passing information between these two people.

This is how proxy servers work.
A proxyserver acts as a middleman between a client and a server, We have 3 things: Client Requests, Proxy Server and Responses.

Client Request: When you send a request to a website. Instead of the website receiving it first, the proxy server receives it.

Proxy Server: The proxy server then forwards your request to the actual website. It’s like a middleman that handles the communication.

Response: The website responds to the proxy server, which then forwards the response back to you.

How Proxies aid with solving the CORS problem

The proxy server makes the request to the target API on behalf of our LiveAPI tool. Since the browser sees the request coming from the proxy server rather than from our site, it bypasses the CORS restrictions.

Figuring out how to build a proxy server: The approach I took

Since we got an idea of what the solution looks like, We were thinking about what technologies should we use.

For our case, we already had an apache2 server up and running, and since Apache is a widely used server with a lot of module support, we felt it was the better choice for building our proxy server.

Putting the Solution into Action: Building an Apache2 Proxy and Getting LiveAPI working

Continue reading the article