1

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

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

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

对于非空 url，这些事件不会被触发。

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

这是一个演示此的代码框：

编辑乐观-桑德森-bv83q

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

实际用例：

在我的前端应用程序（在端口 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/something。这不应该克服同源问题吗？

4

1 回答 1

0

你没有错过任何东西。它按预期工作。由于同源策略，它会阻止 Javascript 跨域检测此事件。

更新：

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

于 2021-01-30T09:44:49.270 回答