Phoenix + Addict - CrossDomain Error on POST action

Question

I'm attempting to use the addict package to have authentication in my projects, but whenever I attempt to do an operation (register, login...) I get a CrossDomain error on my POST.

I already tried adding the cors_plug package to solve these issues as well as added

<input type="hidden" name="_csrf_token" value="<%= get_csrf_token %>">

to my index.html.eex template page and I'm still getting this on my browser console:

POST http://localhost:4000/register 403 (Forbidden)

n.ajaxTransport.k.cors.a.crossDomain.send @ jquery-2.1.4.min.js:4

n.extend.ajax @ jquery-2.1.4.min.js:4

n.each.n.(anonymous function) @ jquery-2.1.4.min.js:4

(anonymous function) @ socket.js:62

n.event.dispatch @ jquery-2.1.4.min.js:3

n.event.add.r.handle @ jquery-2.1.4.min.js:3


XHR finished loading: POST "http://localhost:4000/register".

n.ajaxTransport.k.cors.a.crossDomain.send @ jquery-2.1.4.min.js:4

n.extend.ajax @ jquery-2.1.4.min.js:4n.each.n.(anonymous function) @ jquery-2.1.4.min.js:4

(anonymous function) @ socket.js:62n.event.dispatch @ jquery-2.1.4.min.js:3

n.event.add.r.handle @ jquery-2.1.4.min.js:3

My javascript code follows the same as the addict example except I didn't place it in my template as a script (wasn't even calling the code when I tried). I placed it at the bottom of priv/static/js/app.js instead. The js code is as follows:

$('#btn-register').click(function() {
  var email = $('#txt-register-email').val();
  var username = $('#txt-register-username').val();
  var password = $('#txt-register-password').val();

  $.post('/register', {
    email: email,
    password: password,
    username: username
  })
  .then(function(data) {
    alert(data.message);
  })
  .fail(function(data) {
    alert(data.message);
  })
});
$('#btn-login').click(function() {
  var email = $('#txt-login-email').val();
  var password = $('#txt-login-password').val();

  $.post('/login', {
    email: email,
    password: password
  })
  .then(function(data) {
    alert(data.message);
  })
  .fail(function(data) {
    alert(data.message);
  })
});
$('#btn-recover-password').click(function() {
  var email = $('#txt-recover-password-email').val();

  $.post('/password/recover', {
    email: email
  })
  .then(function(data) {
    alert(data.message);
  })
  .fail(function(data) {
    alert(data.message);
  })
});
$('#btn-logout').click(function() {
  $.post('/logout')
  .then(function(data) {
    alert(data.message);
  })
  .fail(function(data) {
    alert(data.message);
  })
});

$('#btn-reset-password').click(function() {
  var token = $('#txt-reset-password-token').val();
  var password = $('#txt-reset-password').val();
  var password_confirm = $('#txt-reset-password-confirm').val();

  $.post('/password/reset', {
    token: token,
    password: password,
    password_confirm: password_confirm
  })
  .then(function(data) {
    alert(data.message);
  })
  .fail(function(data) {
    alert(data.responseJSON.message);
  })
});

I also added jquery-2.1.4.min.js to my \web\static\vendor\ folder instead.

Answer 1

A hunch, but you need to submit the CSRF token. Here's the code for the reset password form:

$('#btn-reset-password').click(function() {
  var token = $('#txt-reset-password-token').val();
  var password = $('#txt-reset-password').val();
  var password_confirm = $('#txt-reset-password-confirm').val();
  var csrf = $('[name="_csrf_token"]').val(); // Added this

  $.post('/password/reset', {
    token: token,
    password: password,
    password_confirm: password_confirm,
    _csrf_token: csrf // And also added this
  })
  .then(function(data) {
    alert(data.message);
  })
  .fail(function(data) {
    alert(data.responseJSON.message);
  })
});