vue.js - 发送到 vue-cli-service 的未知请求未被代理到后端 Rails 服务器

Question

我的 vue-cli-service 在端口 3001 上运行，我的后端 Rails 应用程序在端口 3000 上运行。

我希望所有未知请求都转到后端 Rails 应用程序。阅读 vue-cli 文档，似乎下面的代码应该可以工作，但事实并非如此。

module.exports = {
    devServer: {
        disableHostCheck: true,
        port: 3001,
        public: '0.0.0.0:3001',
        overlay: {
            warnings: true,
            errors: true
        },
        proxy: 'http://lab.lizardgizzards.com:3000'
    },
    publicPath: "/",
}

我有一个 rails route /terms 应该呈现一个脚手架页面。当我输入 http://lab.lizardgizzards.com:3001/terms 时，它没有渲染 rails 页面，它仍然显示 vue 渲染。它不应该呈现 rails 页面吗？还是这仅适用于 API 请求？

Answer 1

基于 the documentation看来您对 proxy 设置所做的工作应该有效。但是，它对我也不起作用。

原因在代码中:

https://github.com/vuejs/vue-cli/blob/9ab0fbde1cf87d888aa3d2c3c52176b8de464c59/packages/%40vue/cli-service/lib/util/prepareProxy.js#L81

如果设置了明确的context(如下例所示)，它会提前几行，一切正常。如果没有 context，它假定所有带有 accept: text/html 的请求都应该是 index.html，大概是为了与历史模式路由兼容。其他请求(例如 AJAX 调用)应该可以很好地代理。

这对我有用，即使对于 HTML 页面也是如此。

proxy: {
  '/': {
    target: 'http://lab.lizardgizzards.com:3000'
  }
}

就我个人而言，我会把远程服务器放在它自己的路径后面，以便清楚地将它与 UI 分开。例如:

proxy: {
  '/api': {
    target: 'http://lab.lizardgizzards.com:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}