Quick Tip

Use javascript fetch to post to a Phoenix controller

javascriptcsrf

As in the case with Rails, Phoenix also has protection against cross site request forgery (crfs). If you want to post to a controller from a javascript file you need to add the token as a header manually. However, in phoenix the csrf token is provided when you render a form. So, unless there is already a form on the page, there is no token to read. To get around this, add this in the page header:

<%= csrf_meta_tag() %>

And then the post can be triggered with:

const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

fetch('/posts', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': token
  },
  body: JSON.stringify({post: {title: 'Awesome blogpost title'}})
})

Tag Cloud

CSV absinthe alpinejs api async atom authentication bamboo belongs_to boilerplate bootstrap bulk cache cachex calendar channels component crypto csrf datatable deploy ecto esbuild fileupload finch floki forms fuzzyseach graphql guardian has_many has_many_through hooks javascript jsonb layouts liveview modal multitenancy oban otp pagination payments phoenix phoenix-1.6 postgresql pow presence pubsub render rss s3 saasstarterkit scrape search sorting stripe swagger table tagging tailwind teams templates typeahead waffle webhook

Phoenix Bolerplate

Generate a Phoenix Boilerplate and save hours on your next project.

6288 downloads

Try now

SAAS Starter Kit

Get started and save time and resources by using the SAAS Starter Kit built with Phoenix and LiveView.

Subscribe for $39/mo to geat ahead!

Learn More

Related Quick Tips

Published 23 May - 2020

Delete unused node_module folders

Tired of all node_modules folders taking up gigabytes of hard drive space? Did you know theres is a command to find and delete them? If you are lik..

Go to quick_tip