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令牌。这是重置密码表单的代码：

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

Phoenix + Addict - POST操作上的CrossDomain错误

1 个答案: