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

Question

我正在使用vue.js作为UI和node.js作为服务器的Web应用程序。Vue运行在端口8080上，Node.js运行在3001上，所以为了进行API调用，我使用的代理不能按预期工作。

下面的代码在我的vue.config.js用于代理：

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

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

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/类别从localhost:8080代理到http://localhost:3001/.
看https://nodejs.org/api/errors.html#errors_common_system_errors 有关更多信息（EconReset）。

Answer 1

我遇到了这个问题，用127.0.0.1替换localhost，然后用[::1]

几个月后，我不得不回到127.0.0.1...也许有些进程改变了我的主机文件。

您应该在终端中键入pinglocalhost，以便检查当前配置并使用结果设置代理。

Answer 2

试试这个

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

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