MERN项目部署Heroku后a标签href正确但点击无法跳转问题

问题核心原因 #

主要有两点：一是Yandex API请求的参数编码逻辑错误，二是Yandex下载链接自带referer防盗链校验，部署到Heroku后跳转请求携带了你的站点域名作为来源被拦截，右键复制链接打开时无来源referer所以可以正常访问。

修复方案 #

1. 修正API参数编码 #

你当前对整个API请求URL做encodeURI处理，该方法不会转义URL参数值内的特殊字符（如/、?、&等），会导致传入的path参数解析错误，最终返回的下载链接存在隐性编码问题。调整编码逻辑，仅对path参数做单独编码：

fetch(`/books/${search}`)
  .then((res) => res.json())
  .then((d) => {
    Promise.all(
      d.map((e) => {
        // 仅对path参数使用encodeURIComponent编码，不要对整个URL编码
        return fetch(
          `https://cloud-api.yandex.net:443/v1/disk/public/resources/download?public_key=https://disk.yandex.ru/d/o9lNK0tpVCH7sQ&path=${encodeURIComponent(e.path)}`
        )
          .then((res) => res.json())
          .then((res) => {
            return {
              name: e.name,
              size: bytes2Size(e.size),
              date: new Date(e.date).toLocaleDateString(),
              file: res.href,
            };
          });
      })
    ).then((data) => {
      setBooks(data);
      setIsLoaded(true);
      setisLoading(false);
    });
  });

2. 给下载链接添加noreferrer属性绕过防盗链 #

在渲染书籍列表的a标签上添加rel="noreferrer"属性，跳转时不会携带你的站点域名作为来源，和右键复制链接打开的效果完全一致：

<a href={book.file} rel="noreferrer" target="_blank">
  {book.name}
</a>

3. 可选：手动处理跳转避免路由拦截 #

如果你的项目是单页应用，存在全局路由拦截逻辑误拦截外部链接跳转，可以通过点击事件手动触发跳转：

// 定义跳转方法
const handleDownload = (downloadUrl) => {
  window.open(downloadUrl, '_blank', 'noopener,noreferrer')
}

// 对应a标签写法
<a 
  href={book.file}
  onClick={(e) => {
    e.preventDefault()
    handleDownload(book.file)
  }}
>
  {book.name}
</a>

内容的提问来源于stack exchange，提问作者sayinmehmet47