Querying Elixir API from a UI

I would recommend you to understand the mechanics of pre-flight request, aka the one that is done with OPTIONS, and then followed by the real GET, POST, PUT or DELETE request.

A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood.

It is an OPTIONS request, using three HTTP request headers: Access-Control-Request-Method , Access-Control-Request-Headers , and the Origin header.

A preflight request is automatically issued by a browser, when needed. In normal cases, front-end developers don’t need to craft such requests themselves.

Now that you are familiar with a pre-fligth request you can follow the article How to Configure CORS on your Phoenix Application to learn how to do them.

Almost every developer has faced with CORS trouble, but if you haven’t. CORS is just a http mechanism that uses specific headers to grant permission to other domains get some of your data. So imagine that you have a REST API with the domain www.outsiderhost:4000 and you have your SPA hosted in www.localhost:3000 . As you see they are not the same domain, so you have to grant access permission to www.localhost:3000 to get the data from www.outsiderhost:4000 .