使用 fetch() 时，Express.js res.redirect() 不起作用

问题描述 投票：0回答：1

当我使用 

fetch()
访问具有 
res.redirect()
的端点时，我不断收到 CORS 错误。只有当我使用 
fetch()
时才会出现问题，因为如果我直接在浏览器地址栏中输入或在前端代码中使用 
<a>
标签，重定向就可以正常工作。

后台代码：

const corsOptions = {
  origin: function (origin, callback) {
    callback(null, true);
  },
};

/** THIS SENDS FRONTEND (HTML) CODE **/
router.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "view", "index.html"));
});

/** THIS IS THE REDIRECT ENDPOINT **/
// I tried removing/modifying cors but nothing worked.
router.get("/redirector", cors(corsOptions), (req, res) => {
  res.redirect("https://google.com");
});

app.use(
  bodyParser.urlencoded({
    extended: true,
  }),
  bodyParser.json(),
  router
);

const server = http.createServer(app);
server.listen(8080, () => {
  console.log("http://localhost:8080");
});

前端代码：

<body>
   <h1>Home</h1>
   <br />
   <button id="btn">FETCH TO REDIRECT ROUTE</button>

   <script>
      const btn = document.getElementById('btn');
      btn.addEventListener('click', async () => {
         try {
            const response = await fetch('/redirector');
         } catch (error) {
            console.error(error);
         }
      });
   </script>
</body>

上述代码的视觉表示：

我知道这必须以某种方式起作用，因为像 keycloak-connect 这样的 NPM 包实现了相同的 重定向逻辑 并且它工作得很好。我只是不知道如何让它发挥作用。

express redirect cors keycloak openid-connect
1个回答
0
投票

不清楚您是否理解 

await fetch('/redirector');
的作用。所做的就是为您的 Javascript 获取来自 
/redirector
的任何响应。它不会在浏览器中显示任何内容。它不会导致浏览器导航到新页面。它只是获取 Javascript 的数据。而且，由于它是来自网页内的 Javascript 请求，因此它受到 CORS 限制，从而限制了它可以重定向到的位置。

如果您想让浏览器重定向到新页面，请将 

window.location
设置为您希望浏览器转到的新位置，请勿使用 
fetch()
。

如果您希望 

fetch()
遵循重定向（默认情况下），则重定向必须指向您具有跨源权限的位置，否则它将无法遵循重定向。

因此，例如，如果您真正想要通过 

fetch()
调用完成的是获取重定向位置，然后将浏览器页面更改到该位置，则可以执行以下操作：

window.location = "/redirector";

这将导致浏览器转到

/redirector
，然后它将成功看到重定向并告诉浏览器转到：
https://google.com
。让浏览器以这种方式遵循重定向不会遇到 CORS 错误。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.