To make ajax requests from the front end (eg vue) you need to setup the csrf token and send that value with the request.

If this is not configured then you will receive an error that is something like:

(Plug.CSRFProtection.InvalidCSRFTokenError) invalid CSRF (Cross Site Request Forgery) token, make sure all requests include a valid '_csrf_token' param or 'x-csrf-token' header

The following is a simple fix for this error.

1) add the csrf_meta_tag to the templates/layout/app.html.eex file directly beneath the meta tags


    <meta name="description" content="">
    <meta name="author" content="">
    <%= csrf_meta_tag() %>

2) Make sure you send the header and the value along with the ajax request: eg)

    var CSRF_TOKEN = $("meta[name='csrf-token']").attr("content")    
      type: "POST", 
      beforeSend: function(xhr) {
          xhr.setRequestHeader("X-CSRF-Token", CSRF_TOKEN);