React应用部署Netlify后点击下载报404错误，本地运行正常

核心错误原因 #

本地开发时你配置了本地代理规则，会把/create-pdf这类接口请求转发到本地运行的Node服务，生产环境部署到Netlify后，你写的相对路径接口请求会默认打到Netlify静态文件服务器，而你的Node后端是部署在Cpanel的VPS上，Netlify服务器没有对应接口路由，所以返回404。

具体解决步骤 #

• 方案1：前端请求补全后端完整域名
  首先拿到你部署在Cpanel上的Node服务的完整访问域名，修改React端的请求代码，把相对路径改为带完整域名的绝对路径：

  createAndDownloadPdf = () => {
    // 把下面的域名替换为你实际的后端服务域名
    axios.post('https://你实际的后端域名/create-pdf', this.state.testeeRecords)
      .then(() => axios.get('https://你实际的后端域名/fetch-pdf', { responseType: 'blob' }))
      .then((res) => {
        const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
        saveAs(pdfBlob, "fileName.pdf" );
      })
  }
  

  同时需要在Node后端配置CORS跨域规则，允许Netlify的前端域名访问后端接口，示例配置：

  // 先安装cors包：npm install cors
  const cors = require('cors');
  app.use(cors({
    origin: 'https://thirsty-thompson-1a4ddf.netlify.app', // 你的前端域名
    methods: ['GET', 'POST']
  }));
  

• 方案2：配置Netlify代理转发（更推荐，避免跨域问题）

  1. 在你的React项目的public文件夹下新建名为_redirects的文件，写入如下内容：

     /api/*  https://你实际的后端域名/:splat  200
     

  2. 修改前端请求代码，给所有接口路径加上/api前缀：

     createAndDownloadPdf = () => {
       axios.post('/api/create-pdf', this.state.testeeRecords)
         .then(() => axios.get('/api/fetch-pdf', { responseType: 'blob' }))
         .then((res) => {
           const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
           saveAs(pdfBlob, "fileName.pdf" );
         })
     }
     

  该方案下Netlify会自动把所有/api开头的请求转发到你的后端服务，不需要额外配置跨域。

额外优化建议 #

1. 调整后端接口返回逻辑，原代码返回Promise的写法不符合HTTP接口规范，修改为如下写法：

   app.post('/create-pdf',  (req, res) => {
       pdf.create(pdfTemplate(req.body), {}).toFile('result.pdf', (err) => {
           if(err) {
               return res.status(500).send({success: false, msg: '生成PDF失败'});
           }
           res.status(200).send({success: true});
       });
   });
   

2. 后端生成PDF的存储路径使用绝对路径，避免Cpanel环境下路径找不到问题，示例：

   const path = require('path');
   // 生成文件的路径改为绝对路径
   const outputPath = path.resolve(__dirname, 'result.pdf');
   pdf.create(pdfTemplate(req.body), {}).toFile(outputPath, (err) => {
     // 原有逻辑
   })
   

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