CORS Issue

Configuring for CORS

Cross-origin resource sharing (CORS) is a mechanism used by browsers and servers that allows resources with certain restrictions to be requested from another location on the web. It does this using a series of HTTP headers whose contents lay out a server’s specific rules. These rules detail what resources can be accessed and the way to access them. The default rule for asynchronous JavaScript requests limits access to a same-origin policy. Because our PlateSlate itself isn’t serving up our web application, we need to configure our server to respond to the CORS preflight requests appropriately. This will allow cross-origin requests. Thankfully, there’s a plug for this, named cors_plug. We’ll use it directly in our Phoenix endpoint with the default options.

First, let’s add the package to the list of declared dependencies in our PlateSlate mix.exs. We should make sure we stop our PlateSlate Elixir application if it’s still running, then install the package using mix:

mix deps.get 

Once that’s downloaded and ready to go, let’s add the plug to our endpoint. The plug lives under lib/plate_slate_web. We’ll put it right after the socket configuration: