onkeydown 无法在带有 url 的新窗口上工作

问题描述

在我的 React 应用程序中，我通过单击按钮打开一个新窗口。这个窗口被存储在一个变量中，我附加了 onkeydown 和 onbeforeunload 事件的函数。

我观察到只有当窗口的 url 为空时才会调用这些函数。

window.open('','','')

对于非空网址，不会触发这些事件。

window.open('https://wwww.stackoverflow.com','')

这是一个代码沙盒演示：

这与网址本身有关吗？请说明我是否在这里遗漏了什么...

---

实际用例：

在我的前端应用程序（在端口 3000 上运行）中，我试图打开一个新窗口来打开后端 URL（在端口 8000 上运行）。因此，在 http://localhost:3000 中单击按钮，将打开一个指向 http://localhost:8000/api/something 的新窗口。

因此，我添加了 Nginx 作为反向代理，并将“/”指向 3000，将“/api”指向 8000，并在端口 80 下访问这两个端口，如下所示：

http {
    upstream backend {
        server 127.0.0.1:8000;
    }

    upstream frontend {
        server 127.0.0.1:3000;
    }

    server {
        listen 80;

        location /api {
            proxy_pass http://backend;
        }
    
        location / {
            proxy_pass http://frontend;
        }
    }
}

所以，现在我可以通过转到 http://localhost 来访问 ui 应用程序，然后单击按钮，新窗口将打开 http://localhost/api /某事。这不应该克服同源问题吗？

解决方法

你没有遗漏任何东西。它按预期工作。由于 same origin policy，它会阻止 Javascript 跨域检测此事件。

更新：

如果您正在寻找解决方法，您可能应该看到 this answer，因为他们讨论了这个问题并提出了一些解决方案。 此外，由于在反向代理之后，API 和前端应该具有相同的主机和端口，因此在我看来，同源策略不再是问题。