重定向到社交频道的 HTML 标签被阻止

Question

我想将用户重定向到浏览器新选项卡中的其他网站，如下所示。

const redirect = async () => {
  const { link } = await axios.get('https://api.mywebsite.com')
  window.open(link)
}

我知道这是错误的做法，所以我改用重定向的方式。以下是我找到的解决方案。

const redirect = async () => {
  let tab = window.open()

  const { link } = await axios.get('https://api.mywebsite.com')

  tab.location.href = link
}

但是，仍然出现错误。所以我用标签替换按钮标签。

<a href="https://instagram.com/drawbeat_official" target="_blank">Link</a>

但仍然得到结果..这只是简单的

a

标签。我该如何解决这个问题？看起来很奇怪。

我在开发者控制台中发现了一些警告响应标头

instagram.com

cross-origin-opener-policy: same-origin-allow-popups;report-to="coop"

-> This document was blocked from loading in an iframe with a sandbox attribute because this document specified a cross-origin opener policy.

+++

是否可能是因为某种缓存？

Answer 1

问题不在于您的 A 标签或按钮，而在于重定向功能。 CORS 代表跨源资源共享。当您使用 axios 请求内容时，您的浏览器会附加一个名为 origin 的标头。其中包含发出请求的 url。当服务器返回响应时，浏览器检查源是否与标头 Access-Control-Allow-Origin 中指定的任何一个标头匹配。如果不是，则不允许网站查看响应并读取响应。但即使您成功地将网站添加到标题中，它仍然无法正常工作。当您在 axios 的帮助下收到请求时，它会返回 html。我建议使用 window.location 进行重定向。例如：

window.location = "https://yourwebsite.com"

这将在客户端上进行重定向。

卡梅开始

Answer 2

由于与同源安全策略相关的安全原因，某些不同来源的网站不允许这样做，在这种情况下，您的浏览器将阻止在您的来源（您的网站 URL）的新选项卡上打开这些网站。通过从托管网站的服务器启用 CORS，可以解决该问题。