Vue项目中PDF文件链接点击跳转404问题求助

如果点击PDF链接后跳转到应用的404页面，但Postman能正常获取文件，问题大概率出在链接格式或服务器路由配置上，以下是具体的排查和解决步骤：

1. 确认PDF链接是完整的绝对路径 #

首先检查从后端获取的链接格式：必须带有完整的http/https协议和域名，比如https://abc.com/api/filename.pdf，不能是相对路径（如/api/filename.pdf）或格式错误的链接（比如漏掉双斜杠的https:abc.com/api/filename.pdf）。

如果后端返回的是相对路径，手动拼接完整路径：

const backendBaseUrl = 'https://your-backend-domain.com';
const pdfRelativePath = '/api/filename.pdf'; // 后端返回的相对路径
const fullPdfUrl = `${backendBaseUrl}${pdfRelativePath}`;

2. 修正服务器路由配置（核心解决办法） #

浏览器访问链接时返回Vue的404，说明服务器把/api/xxx.pdf这类请求也转发给了Vue的index.html，导致Vue路由无法匹配该路径。Postman能正常请求是因为直接访问了后端接口，没有经过前端服务器的SPA路由规则。

Node.js（Express）配置示例 #

确保API路由优先于SPA路由处理：

const express = require('express');
const path = require('path');
const app = express();

// 先处理所有/api开头的请求，转发到后端接口
app.use('/api', require('./your-api-routes'));

// 托管Vue打包后的静态文件
app.use(express.static(path.join(__dirname, 'dist')));

// 最后处理SPA路由（仅当其他路由都不匹配时才返回index.html）
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

Nginx配置示例 #

如果用Nginx部署前端，需要单独配置API路径的转发，避免被SPA规则拦截：

server {
  listen 80;
  server_name your-domain.com;

  # 转发所有/api开头的请求到后端服务
  location /api {
    proxy_pass http://your-node-backend:3000;
    proxy_set_header Host $host;
  }

  # 处理前端SPA路由，仅当文件不存在时返回index.html
  location / {
    root /path/to/vue/dist;
    try_files $uri $uri/ /index.html;
  }
}

3. 确保a标签的正确写法 #

使用原生<a>标签而非Vue Router的<router-link>，并且正确设置target="_blank"，推荐加上rel="noopener noreferrer"提升安全性：

<template>
  <a 
    :href="fullPdfUrl" 
    target="_blank" 
    rel="noopener noreferrer"
  >
    查看PDF文件
  </a>
</template>

<script setup>
const fullPdfUrl = 'https://your-backend-domain.com/api/filename.pdf';
</script>

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