Question

我正在创建一个简单的VueJs应用程序，其中Axios用于发出http请求。像这样：

load () {
  let vm = this
  this.$http
    .get('/api/posts')
    .then(response => {
      // success
    })
    .catch(error => {
      // failure
    })
}

在webpack配置文件中，config/index.js：

module.exports = {
dev: {
 proxyTable: {
  '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    secure: false,
    changeOrigin: true,
    pathRewrite: { '^/api': '' }
  }
},
}

是否有任何遗漏使这项工作？根据此documentation，webpack使用http-proxy-middleware，但我不确定它是否已经以vue-cli项目生成的方式内置，或者我们需要手动安装它。生成的模板和任何教程都没有提到这一点。

非常感谢。

Answer 1

您的proxyTable配置本身没有任何问题。但...

仔细检查您的config/index.js文件。如果您将proxyTable代码段添加到包含默认内容的配置文件中，则您的config/index.js文件将为：

module.exports = {
  dev: {
    proxyTable: {                                          // the snippet you added
      '/api': {                                            // the snippet you added
        target: 'http://jsonplaceholder.typicode.com',     // the snippet you added
        secure: false,                                     // the snippet you added
        changeOrigin: true,                                // the snippet you added
        pathRewrite: { '^/api': '' }                       // the snippet you added
      }                                                    // the snippet you added
    },                                                     // the snippet you added

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},                  // <================================ oops...

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    ...

现在，注意那里有一个proxyTable: {},属性。它会覆盖您的配置。

解决方案：删除proxyTable: {},。

在VueJs + Axios中为http请求配置webpack代理

1 个答案: