时间戳

首页 > 解决方案 > Form vs Fetch API不呈现重定向页面js

javascript - Form vs Fetch API不呈现重定向页面js

问题描述

我有一个按钮，点击后对 /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");
});

单击该按钮，我收到如下错误，并且页面未重定向。

Access to fetch at 'https://google.com/' (redirected from 'http://localhost:4242/portal') from origin 'http://localhost:4242' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

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

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

问题：

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

谢谢！

标签： javascript

解决方案

在这种情况下，form post 和 fetch post 有什么区别？

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

fetch返回要由 JavaScript 处理的数据，而不会导致浏览器导航（尽管您不会对 的返回值做任何事情fetch）。

为什么只有在我进行 fetch 调用而不是在我进行表单调用时才会收到 CORS 错误 - 它们不是都从不同的资源请求数据（重定向）吗？

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

如果 JavaScript 一开始就没有参与，那是不可能发生的。

推荐阅读