javascript - Form vs Fetch API 不渲染重定向页面 js

Question

我有一个按钮，单击该按钮即可对/portal 进行 fetch POST 调用。

portalButton.click(function () {
    console.log(customerID);
    fetch("/portal", {
      method: "POST", redirect: 'follow', mode: 'cors',
      body: JSON.stringify({ customer: customerID }),
    })
});

我有一个简单的 Express/portal 端点，可以重定向到另一个 URL，例如 google.com，

app.post("/portal", async (req, res) => {
  res.redirect("https://google.com");
});

单击按钮时出现如下错误，并且页面未重定向。

从源“http://localhost:4242”获取“https://google.com/”(从“http://localhost:4242/portal”重定向)的访问已被阻止CORS 策略:请求的资源上不存在“Access-Control-Allow-Origin” header 。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

但是，如果我在表单中有该按钮，则不会出现 cors 错误，并且页面会成功重定向。

<form name="myForm" action="/portal" method="post">
      <input type="submit" value="Submit">
</form>

问题:

1. 在这种情况下，表单发布和获取发布有什么区别？ (是的，我确实阅读了 fetch API 文档)
2. 为什么只有在进行 fetch 调用时才会出现 CORS 错误，而在进行表单调用时则不会出现 - 它们不是都从不同的资源请求数据(重定向)吗？

谢谢!

Answer 1

What is the difference between form post and fetch post in this context?

提交表单使浏览器导航到新 URL。

fetch 返回由 JavaScript 处理的数据，而根本不会导致浏览器导航(尽管您不对 fetch 的返回值执行任何操作)。

Why do I get the CORS error only when I do fetch call and not when I do the form call - aren't they both requesting data (the redirect) from a different resource?

CORS 旨在保护用户和网站 A 之间应由网站 B 上运行的 JavaScript 访问的私有(private)数据。

如果一开始就没有涉及 JavaScript，这种情况就不会发生。