js HTTP 请求处理的回调函数和立即执行有变化吗？

Question

当我立即调用包含http请求的函数时，它会返回结果。但是当我将它捆绑为偶数侦听器的回调函数时，它显示错误为， 类型错误：尝试获取资源时出现网络错误。 尝试获取资源时出现 NetworkError 错误

const signupButton = document.getElementById("signup-button");
signupButton.addEventListener("click", postStudent);
// postStudent();

function postStudent() {
if (signupButton === null) {
 console.log("Null");
}
let email = document.getElementById("floatingInput").value;
let password = document.getElementById("floatingPassword").value;

console.log("HI");

let student = {
 email: email,
 password: password,
};

fetch("http://localhost:8080/LogIn", {
  method: "POST",
  body: JSON.stringify(student),
  headers: {
    "Content-Type": "application/json",
  },
  }).then((res) => {
     return res.json();
  })
   .then((data) => {
      console.log(data);
  })
    .catch((error) => {
      console.error(error);
  });
  }

Answer 1

您面临的问题可能与您尝试从不同来源提供的网页向不同域 (localhost:8080) 发出 HTTP 请求有关。这可能会导致“跨域资源共享”(CORS) 错误。

当您直接调用 postStudent() 函数时，它会在当前文档的上下文中执行，您的浏览器可能会以不同的方式处理 CORS 问题。但是，当您将该函数附加到事件侦听器时，它可能会受到浏览器安全策略的约束，从而导致 CORS 错误。

您可以采取以下几个步骤来解决此问题：

在服务器上启用 CORS： 确保您的服务器（在 http://localhost:8080 运行）配置为允许来自前端域的请求。您可以通过在服务器应用程序中启用 CORS 来实现此目的。 例如，如果您使用 Spring Boot，则可以使用 @CrossOrigin 注解：

@CrossOrigin(origins = "http://your-frontend-domain.com")
@RestController
public class YourController {
    // Your controller code here
}

使用相对路径： 不要在 fetch 函数中使用绝对 URL，而应使用相对路径。这可以帮助避免一些 CORS 问题。

fetch("/LogIn", {
   method: "POST",
   body: JSON.stringify(student),
   headers: {
      "Content-Type": "application/json",
   },
}).then((res) => {
   return res.json();
}).then((data) => {
   console.log(data);
}).catch((error) => {
   console.error(error);
});

在开发过程中从同一域提供前端和后端服务：

在开发过程中，如果可能，请从同一域为您的前端和后端提供服务。这有助于避免本地开发环境中的 CORS 问题。 检查浏览器控制台了解更多详细信息：

打开浏览器的开发者控制台并查找与 CORS 相关的更详细的错误消息。它可能会提供有关特定 CORS 策略违规的其他信息。