无法在我的 vue js 应用程序中设置代理端口答案

【问题标题】：Not able to set proxy port in my vue js app无法在我的 vue js 应用程序中设置代理端口
【发布时间】：2020-01-18 01:16:54
【问题描述】：

我正在开发一个使用 vue.js 作为 UI 和 node.js 作为服务器的网络应用程序。 Vue 在端口 8080 上运行，而 Node.js 在 3001 上运行，因此为了进行 API 调用，我使用了一个无法按预期工作的代理。

我vue.config.js 中的以下代码用于代理：

module.exports = {
    devServer: {
        proxy: {
            '^/api': {
                target: 'http://localhost:3001',
                ws: true,
                secure: false
            }
        }
    }
}

下面是我的主页文件，它将使用axios 调用 URL

import axios from 'axios'

export default {
  data () {
    return {
      categories: []
    }
  },
  created () {
    axios.get('/api/v1/categories')
      .then(res => {
        debugger
        this.categories = res.data
      })
  }
}

由于我是vue.js 的新手，我不知道出了什么问题。

编辑这是我得到的错误：

代理错误：无法将请求 /api/v1/categories 从 localhost:8080 代理到 http://localhost:3001/。
更多信息请参见https://nodejs.org/api/errors.html#errors_common_system_errors (ECONNRESET)。

【问题讨论】：

您是否看到任何请求达到 3001？
@skirtle 是的，它在我的终端上抛出错误Proxy error: Could not proxy request /api/v1/categories from localhost:8080 to http://localhost:3001/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
但是运行在 3001 端口的服务器呢？那日志/终端怎么说？您可以直接从浏览器访问该服务器吗？
@skirtle no 在网络选项卡中没有显示 api，我不知道为什么
3001上的服务器正在运行，对吧？尝试直接从浏览器中点击http://localhost:3001，方法是在地址栏中键入它。我再说一遍，日志/终端是怎么说的？

标签： vue.js node.js vue.js javascript vue.js proxy vuejs2 axios

【解决方案1】：

我遇到了这个问题，通过将 localhost 替换为 127.0.0.1，然后替换为 [::1] 解决了这个问题

几个月后，我不得不回到 127.0.0.1…… 也许某些过程改变了我的 hosts 文件。

您应该在终端中输入 ping localhost 以检查您当前的配置并使用结果来设置您的代理。

【讨论】：

【解决方案2】：

试试这个

module.exports = { 
  devServer: { 
    proxy: { 
      '/api': { 
        target: 'http://localhost:3001', 
        ws: true, 
        secure: false 
      } 
    } 
  } 
}

另外，请检查您是否为 axios 设置了基本路径。如果是这样，请从 axios 调用中删除 api，因为基本路径也会添加到 axios 调用中。

【讨论】：