Phoenix + Addict - Errore CrossDomain sull'azione POST

Question

Sto tentando di utilizzare il pacchetto addict per disporre dell'autenticazione nei miei progetti, ma ogni volta che tento di eseguire un'operazione (registrazione, accesso ...) ottengo un errore CrossDomain su il mio post.

ho già provato ad aggiungere il pacchetto cors_plug per risolvere questi problemi così come aggiunto

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

alla mia pagina modello index.html.eex e sto ancora ricevendo questo sul mio console del browser:

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 

Il mio codice javascript segue lo stesso del addict example tranne che non l'ho inserito nel mio modello come script (non avevo nemmeno chiamato il codice quando ho provato). L'ho posizionato nella parte inferiore di priv/static/js/app.js. Il js codice è il seguente:

$('#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); 
    }) 
}); 

Ho anche aggiunto jquery-2.1.4.min.js alla mia cartella \web\static\vendor\ invece.

Answer 1

Un'intuizione, ma è necessario inviare il token CSRF. Ecco il codice per il modulo di reimpostazione della password:

$('#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); 
    }) 
});