向快速 JS 服务器发出 POST 请求时出错

Question

我在发出开机自检请求时遇到问题。我实际上正在尝试向本地计算机上运行的 Express 服务器发出多个 POST 请求。浏览器显示错误“类型错误：尝试获取资源时出现网络错误”和“内容安全策略：页面的设置阻止加载 http://localhost:3000/favicon.ico 的资源（”默认-src“）。内容安全策略：页面的设置阻止了在数据：应用程序/字体-woff2;字符集=utf 处加载资源-...（“默认 src”）。

这是我的JS代码：

var email = $("#mail");

var password = $("#password");

var submit = $("#signup");

var form = $("#register");

var showPass = $("#showPass");

var confirmPassword = $("#confirmPass");

//var name = $("#name");

var emoji = $(".emoji");

window.onload = function() {

  email.val("");

  password.val("");

}

showPass.on("click", function() {

  $(this).is(':checked') ? password.attr('type', 'text') : password.attr('type', 'password');

  $(this).is(':checked') ? confirmPassword.attr('type', 'text') : confirmPassword.attr('type', 'password');

});

password.keyup(function() {

  var pswd = $(this).val();

  if (pswd.length < 8) {

    $('#length').removeClass('valid').addClass('invalid');

    emoji.eq(-1).text('❌').css('color', '#ec3f41');

  } else {

    $('#length').removeClass('invalid').addClass('valid');

    emoji.eq(-1).text('✔').css('color', 'green');

  }

  if (pswd.match(/[A-z]/)) {

    $('#letter').removeClass('invalid').addClass('valid');

    emoji.eq(0).text('✔').css('color', 'green');

  } else {

    $('#letter').removeClass('valid').addClass('invalid');

    emoji.eq(0).text('❌').css('color', '#ec3f41');

  }

  if (pswd.match(/[A-Z]/)) {

    $('#capital').removeClass('invalid').addClass('valid');

    emoji.eq(1).text('✔').css('color', 'green');

  } else {

    $('#capital').removeClass('valid').addClass('invalid');

    emoji.eq(1).text('❌').css('color', '#ec3f41');

  }

  if (pswd.match(/\d/)) {

    $('#number').removeClass('invalid').addClass('valid');

    emoji.eq(2).text('✔').css('color', 'green');

  } else {

    $('#number').removeClass('valid').addClass('invalid');

    emoji.eq(2).text('❌').css('color', '#ec3f41');

  }

})

Answer 1

您正在向 发出请求。因此，您尚未在此处定义确切的域。在您的情况下，它必须在运行前端代码的任何主机名：端口上选取本地主机：端口的URL。您需要定义精确才能使其正常工作。/apihttp(s)://hostname:port/api

Answer 2

此错误是由于浏览器阻止了 CORS（跨源资源共享）。尝试运行命令 。通常，铬仅允许共享具有相同源的资源。您也可以在&nbsp;Chrome 中看到停用同源政策以获取帮助。完成此操作后，我在我的计算机上运行了您的代码，并且它正常工作。chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security如果这不起作用，您可以使用塑料填充。最受欢迎的聚合填充是同构提取。这里有一篇关于使用同构获取的文章：https://medium.com/vinh-rocks/how-to-handle-networkerror-when-using-fetch-ff2663220435

Answer 3

实际上，提交按钮与表单链接，因此在提交时，POST 请求将转到本地主机 URL 而不是 API URL。因此，向服务器发出开机自检请求时出现问题。我实际上在很长一段时间后才得到它。

Answer 4

添加到提交侦听器将阻止表单提交（通过本地主机 URL）。e.preventDefault()...submit.on("click", async function(e) {&nbsp; e.preventDefault();&nbsp; // execute the rest of your code.});