javascript - 在 Vue 中代理 webpack 开发服务器

Question

我正在尝试代理所有使用and的api/请求。命令行上的输出表明已创建代理，但实际上并未代理到正确的地址和 404。http://localhost:3000vue-axiosvuex

我在 webpack 中有以下设置：

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    'api/': {
      target: 'https://localhost:3000/api',
      changeOrigin: true,
      pathRewrite: {
        '^/api':""
      }
    }
  }
}

在我的动作文件中，我有：

import Vue from 'vue'

export const register = ({ commit }, user) => {
  return new Promise((resolve, reject) => {
    Vue.axios.post('users', user)
        .then(res => {
          console.log(res)
          debugger
        })
        .catch(err => {
          console.error(err)
          debugger
        })
  })
}

控制台输出表明代理已建立：

[HPM] Proxy created: /api  ->  https://localhost:3000/api
[HPM] Proxy rewrite rule created: "^/api" ~> ""

但是当我实际调用该函数时，它会返回http://localhost:8080/users 404 (Not Found)

这有什么不正确的？

我咨询过

• Stackoverflow：使用 vue-cli 将请求代理到单独的后端服务器

• Vue 文档：https ://vuejs-templates.github.io/webpack/proxy.html

• Github 问题：https ://github.com/webpack/webpack-dev-server/issues/458

这些解决方案都没有奏效。

我听说这可能是 hmr 的问题，但这似乎不太可能。

有任何想法吗？

我尝试了以下组合：

  '/api': {
    target: 'https://localhost:3000',
    secure: false,
    changeOrigin: true
  },

  'api/': {
    target: 'https://localhost:3000',
    secure: false,
    changeOrigin: true
  },

  'api/*': {
    target: 'https://localhost:3000',
    secure: false,
    changeOrigin: true
  },

  '*/api/**': {
    target: 'https://localhost:3000',
    secure: false,
    changeOrigin: true
  },

  '*': {
    target: 'https://localhost:3000',
    secure: false,
    changeOrigin: true
  },

  '/api/*': {
    target: 'http://localhost:3000',
    changeOrigin: true
  }

proxy: {
  "/api": {
    "target": {
      "host": "localhost",
      "protocol": 'http:',
      "port": 3000
    },
    ignorePath: true,
    changeOrigin: true,
    secure: false
  }
},

Answer 1

我只是遇到了同样的问题并尝试了一切。事实证明，代理将匹配的路径段附加/api到目标的末尾，并在那里查找代理文件。所以这个规则：

'/api/*': {
    target: 'http://localhost:3000',
    changeOrigin: true
}

实际上是在这里寻找文件：

http://localhost:3000/api

不直观。如果您希望它更直观地运行并针对实际目标，则需要从路径中删除匹配的部分，如下所示：

pathRewrite: {'^/api' : ''}

正确的规则变成：

'/api/*': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {'^/api' : ''}
}

由于未知原因，此处pathRewrite的文档侧边栏中未明确列出，尽管它隐藏在配置指南中的 1 个位置。

Answer 2

请尝试向以下内容发出请求Vue.axios.post("api/users", user)。