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

Question

我正在使用 Axios 创建一个简单的 VueJs 应用程序来发出 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 sn-p 添加到具有默认内容的配置文件中，您的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: {},。