如何在新窗口展示Axios Get请求的API响应？使用React前端Node后端

方案1：通用方案（适用于所有响应类型，支持需要鉴权的接口） #

直接在Axios请求的成功回调中创建新窗口，将返回的响应内容写入新窗口即可，修改后的代码如下：

axios
  .get(`http://localhost:5000/files`)
  .then((res) => {
    this.setState({
      inferenceout: res.data,
      isLoading: false
    })
    // 打开空白新窗口
    const newWindow = window.open('', '_blank')
    if (!newWindow) {
      alert('新窗口被浏览器拦截，请允许本站点弹窗后重试')
      return
    }
    // 按响应类型适配展示逻辑
    if (typeof res.data === 'object') {
      // JSON响应格式化后展示
      newWindow.document.write(`
        <html>
          <head><title>API响应结果</title></head>
          <body>
            <pre>${JSON.stringify(res.data, null, 2)}</pre>
          </body>
        </html>
      `)
    } else {
      // 文本/HTML响应直接写入
      newWindow.document.write(res.data)
    }
    newWindow.document.close()
  })

方案2：简化方案（仅适用于无需鉴权的可直接访问资源） #

如果你的/files接口不需要携带Cookie、Token等鉴权信息，且返回的是浏览器可直接识别的资源（比如HTML页面、图片、PDF等），可以不用走Axios请求，直接调用window.open打开接口地址即可：

window.open('http://localhost:5000/files', '_blank')

注意事项 #

• 浏览器默认会拦截非用户主动触发的弹窗，建议把请求逻辑绑定在按钮点击、表单提交等用户交互事件的回调中，避免被拦截
• 如果返回的是二进制文件（如Excel、压缩包），需要指定Axios的responseType: 'blob'，生成临时URL后再打开，示例代码如下：

axios.get(`http://localhost:5000/files`, { responseType: 'blob' })
  .then(res => {
    this.setState({ inferenceout: res.data, isLoading: false })
    const blobUrl = URL.createObjectURL(res.data)
    const newWindow = window.open(blobUrl, '_blank')
    if (!newWindow) {
      alert('新窗口被浏览器拦截，请允许本站点弹窗后重试')
    }
    // 1分钟后释放临时URL占用的内存
    setTimeout(() => URL.revokeObjectURL(blobUrl), 60000)
  })

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