Enabling Cross-Origin Resource Sharing CORS in Phoenix / Elixir

Question

My frontend is a separate Brunch.io AngularJS app. Since my frontend runs on http://localhost:3333 and my Phoenix backend on http://localhost:4000 I get this error when trying to POST to http://localhost:4000/api/users/register

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3333' is therefore not allowed access. The response had HTTP status code 404.

So I think it is a CORS issue. How can I send the headers in phoenix?

This is my router.ex

  scope "/api", MyApp do
    pipe_through :api
    # Users
    post "/users/register", UserController, :register
  end

This is my UserController

defmodule MyApp.UserController do
  use MyApp.Web, :controller

  def register(conn, params) do
    IO.puts(inspect(params))

    conn
    |> put_status(201)
    |> json  %{ok: true, data: params}
  end

end

Chris McCord Chris McCord · Accepted Answer · 2015-11-05T23:03:16

You have a few options that will wire up cors for you: https://hex.pm/packages?search=cors&sort=downloads

Enabling Cross-Origin Resource Sharing CORS in Phoenix / Elixir

1 Answers