当我使用
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 包实现了相同的 重定向逻辑 并且它工作得很好。我只是不知道如何让它发挥作用。
不清楚您是否理解
await fetch('/redirector');
的作用。所做的就是为您的 Javascript 获取来自 /redirector
的任何响应。它不会在浏览器中显示任何内容。它不会导致浏览器导航到新页面。它只是获取 Javascript 的数据。而且,由于它是来自网页内的 Javascript 请求,因此它受到 CORS 限制,从而限制了它可以重定向到的位置。
如果您想让浏览器重定向到新页面,请将
window.location
设置为您希望浏览器转到的新位置,请勿使用 fetch()
。
如果您希望
fetch()
遵循重定向(默认情况下),则重定向必须指向您具有跨源权限的位置,否则它将无法遵循重定向。
因此,例如,如果您真正想要通过
fetch()
调用完成的是获取重定向位置,然后将浏览器页面更改到该位置,则可以执行以下操作:
window.location = "/redirector";
这将导致浏览器转到
/redirector
,然后它将成功看到重定向并告诉浏览器转到:https://google.com
。让浏览器以这种方式遵循重定向不会遇到 CORS 错误。