来自 Vue/Nuxt App 的 axios 请求超时，服务器没有响应，但相同的 Curl 请求得到响应答案

【问题标题】：Axios Request From Vue/Nuxt App Timed Out, No Response From Server, But Same Curl Request Gets Response来自 Vue/Nuxt App 的 axios 请求超时，服务器没有响应，但相同的 Curl 请求得到响应
【发布时间】：2021-03-25 20:00:42
【问题描述】：

我有一个 Nuxt 应用程序，它向运行 NodeJS 作为 API 的 IIS 服务器发出请求。 IIS 服务器设置为只接受来自前端 Vue 应用服务器的请求（端口 80 和 443）。

当我从前端服务器上的命令行运行以下命令时，我得到了正确的响应，并且可以看到请求通过日志到达 IIS 后端服务器：

//This WORKS
curl --cacert certbundle.crt https://xx.xx.xx.xx/cost/woapprovedqueue

我在我运行 curl 请求的同一前端服务器上的 Nuxt 应用程序中使用 Axios 发出看似相似的请求，但我没有从服务器得到任何响应，并且请求在一段时间后超时并出现错误net::ERR_CONNECTION_TIMED_OUT.

当我从 Chrome DevTools 将失败的执行请求复制为 cURL 时，我得到以下信息：

curl 'https://xx.xx.xx.xx/cost/woapprovedqueue' \
  -H 'sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'Referer: https://xxx.yyy.com/' \
  -H 'DNT: 1' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36' \
  --compressed

如果我再次将上面的 curl 命令带到前端并添加我的--cacert certbundle.crt，它会起作用。

我需要做什么才能使这个请求与 Nuxt/Axios 一起工作？这是 SSL/证书问题吗？我倾向于“否”，因为我没有收到任何响应，并且后端 API 服务器日志中没有任何显示。你会认为我们至少会得到一个证书问题的响应。

我在plugins/axios.js有一个文件：


export default function ({ $axios, store, app }) {
  $axios.defaults.httpsAgent = new https.Agent({
        rejectUnauthorized: false,
  });
}

我在 nuxt.config.js 中用这个加载插件：plugins: [ '@/plugins/axios' ]

我在 nuxt.config.js 中有一个 axios baseURL：axios: { baseURL: 'https://xx.xx.xx.xx' }

在我的 .vue 页面上，我有以下请求：

//This does NOT seem to work. I get no response, timed out, and nothing in server logs.
 this.queue = await this.$axios.$get('/cost/woapprovedqueue');

非常感谢任何和所有帮助，因为我已经尝试解决这个问题一段时间了。 :)

更新，提供从 Google Chrome 开发工具复制的 fetch 查询：

fetch("https://xx.xx.xx.xx/cost/woapprovedqueue", {
  "headers": {
    "accept": "application/json, text/plain, */*",
    "sec-ch-ua": "\"Google Chrome\";v=\"89\", \"Chromium\";v=\"89\", \";Not A Brand\";v=\"99\"",
    "sec-ch-ua-mobile": "?0"
  },
  "referrer": "https://xxx.yyy.com/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": null,
  "method": "GET",
  "mode": "cors",
  "credentials": "omit"
});

【问题讨论】：

所以它在客户端失败了，不是吗？您是否尝试以与 curl 相同的方式复制 fetch api 请求并在浏览器和节点中运行它？
@EstusFlask 感谢您的帮助！我已将获取结果粘贴到上述问题中。我会尝试在我的 Nuxt 应用程序中运行它，看看会发生什么。

标签： node.js api vue.js axios nuxt.js

【解决方案1】：

原来问题与 HTTPS/SSL 有关。我需要设置和使用代理。我遇到了一个与 CORS 相关的问题，该问题仅在检查 Firefox 中的网络事件时出现（由于某种原因，Chrome 没有显示此级别的详细信息）。这些是最终在 nuxt.config.js 中起作用的设置：

  axios: {
    https: true,
    proxy: true,
    prefix: '/api/',
  },

  proxy: {
    '/api/': { target: process.env.API_BASE_URL, secure: false, pathRewrite: {'^/api/': ''} },
  },

【讨论】：