phoenix-framework - Phoenix + Addict - POST 操作的跨域错误

Question

我正在尝试使用 addict包以在我的项目中进行身份验证，但是每当我尝试执行操作(注册、登录...)时，我的 POST 都会出现 CrossDomain 错误。

我已经尝试添加 cors_plug包来解决这些问题以及添加

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

到我的 index.html.eex 模板页面，我仍然在浏览器控制台上看到这个:

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

我的 javascript 代码与 addict example 相同除了我没有将它作为脚本放在我的模板中(我尝试时甚至没有调用代码)。我把它放在 priv/static/js/app.js的底部反而。
js代码如下:

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

我还加了 jquery-2.1.4.min.js 到我的 \web\static\vendor\文件夹代替。

Answer 1

预感，但您需要提交 CSRF token 。这是重置密码表单的代码:

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