向快速 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（跨源资源共享）。尝试运行命令 。通常，铬仅允许共享具有相同源的资源。您也可以在 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) {

  e.preventDefault();

  // execute the rest of your code.

});