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

【问题标题】：Unknown requests sent to vue-cli-service not being proxied to backend Rails server发送到 vue-cli-service 的未知请求未被代理到后端 Rails 服务器
【发布时间】：2019-09-14 20:52:16
【问题描述】：

我的 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 路由/terms 应该呈现一个脚手架页面。当我输入http://lab.lizardgizzards.com:3001/terms 时，它不会渲染rails 页面，它仍然显示vue 渲染。它不应该呈现rails页面吗？还是这仅适用于 API 请求？

【问题讨论】：

你如何定义未知？没有在vue-router中注册？
请参阅devServer proxies 的 webpack 文档以及有关此功能所基于的 http-proxy-middleware 的文档。在每个请求中，您可以定义请求是发送到您的后端还是发送到服务的前端。您可以定义一个函数并读取整个请求对象。但是，如果您想将其他所有内容发送到后端，您似乎需要管理应该发送到前端的 URL 列表。使用不同的前缀端点通常更容易（例如/api）

标签： vue.js

【解决方案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': ''
    }
  }
}

【讨论】：