使用 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.