Querying Elixir API from a UI

Hello, it’s hard to answer without code…

I am not familiar with Vue, but I don’t think it does the request by itself.

Something like fetch, or axios?

It would be nice to see how your client js code does the request to your API.

It’s a plain JS function really. All it does is call the fetch API and return the response as an observable:

export function request(method, url, payload) {
  const body = JSON.stringify(payload);
  const parameters = {
    headers: { 'Content-Type': 'application/json' } ,
    method: method,
    mode: "no-cors",
    body: body,
    cache: "default",
  };
  return Observable.create(observer => {
    fetch(url, parameters)
      .then(response => {
        observer.next(response);
        observer.complete();
      })
      .catch(error => {
        observer.error(error);
      });
  });
}

Those are my headers with axios…

const auth_headers = () => ({
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${AuthService.loadToken()}`,
  },
  credentials: 'same-origin',
});

My headers are a little bit different because I pass a token, but I can see I also added Accept keyword.

I think if you’re using the browser fetchAPI you need to create the headers from the constructor, I use this:

export function requester({ method, url, data, accept, content_type }, token) {
    let body = typeof data === "string" ? data : JSON.stringify(data);

    token = token ? token : "";
    content_type = content_type ? content_type : "application/json";
    accept = accept ? accept : "application/json";
    
    if (process && process.server) {
        const fetch = require("node-fetch");
        let headers = {
            "Bearer": token,
            "Content-Type": content_type,
            "Accept": accept
        };
        let request = {
            method: method,
            headers: headers,
            body: body,
            mode: "cors"
        };

        return fetch(url, request)
            .then(response => response.json())
            .catch(error => { return {error: error.message} });
        
    } else {
        
        let headers = new Headers({
            "Bearer": token,
            "Content-Type": content_type,
            "Accept": accept
        });
        
        let request = new Request(url, {
            method: method,
            headers: headers,
            body: body,
            mode: "cors"
        });
        
        return fetch(request)
            .then(response => response.json())
            .catch(error => { return {error: error.message} });
    }
}

Found the answer to my problem here. “application/json” is only a valid content type with CORS.

Now my problem is how to configure CORS in my phoenix api. I’m using cors_plug. But is not working, I’m still getting in my request.

Access to fetch at 'http://localhost:4000/v1/users/signup' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This is my CORS config in router.ex file

defmodule DumyApiWeb.Router do
  use DummyApiWeb, :router
...
pipeline :v1 do
    plug CORSPlug, origin: "http://localhost:8080"
    plug DummyApiWeb.Version, version: :v1
end
...
scope "/v1", DummyApiWeb do
    pipe_through :v1
    post "/users/signup", UserController, :create
    post "/users/signin", UserController, :signin
  end
...
end

Solved: I had to defined an options method for UserController to make it work.

Can you elaborate? Maybe with a code example?

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 .