如何在生产环境中代理 Vue.js 中的 URL 调用?

Posted

技术标签:

【中文标题】如何在生产环境中代理 Vue.js 中的 URL 调用?【英文标题】:How to proxy URL call in Vue.js in production? 【发布时间】:2019-03-18 05:43:08 【问题描述】:

在 Dev 中,我有我的本地 vue.js 项目和一个开发服务器。我遵循了这个指南:

http://vuejs-templates.github.io/webpack/proxy.html

设置proxyTable 以便每当我使用Axios 对开发服务器进行REST 调用时,它将重定向到我的开发服务器而不是vue url。

当我部署到 prod 时,我的 vue 构建包部署到 S3,而我的 rest 服务器在 EBS 中。它们位于不同的子域中。所以我的 Vue 还需要为所有 REST 调用设置一个代理。但是,vuejs&webpack 不允许在 build 部分下的配置文件中使用 proxyTable。处理这个问题的最佳方法是什么?

我的配置:

module.exports = 
  build: 
    env: 'prod',
    productionSourceMap: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: 
      '/api': 
       logLevel: 'info',
       target: 'http://myRestServer.com/...',
       changeOrigin: true,
       pathRewrite: 
         '^/api': '/'
       
      
    , 
  ,
 dev: 
   proxyTable: 
     '/api': 
      logLevel: 'info',
      target: 'http://127.0.0.1:3005',
       changeOrigin: true,
      pathRewrite: 
         '^/api': '/'
      
    
  ,

【问题讨论】:

Vue.js 在浏览器中运行。除非您设置自己的自定义代理服务,否则您无法通过代理路由 AJAX 调用。 您应该在您的 aws 架构中为您的 API 调用和代理定义一个 dns 【参考方案1】:

也许你应该改用devServer。而对于build,我想现在还有另一个名字。

例如:

module.exports = 
  devServer: 
   // your settings
  

例如:

module.exports = 
  devServer: 
    proxy: 
      '/api': 
        target: '<url>',
        ws: true,
        changeOrigin: true
      ,
      '/foo': 
        target: '<other_url>'
      
    
  

参考:vue-cli

【讨论】:

这适用于开发环境,当 Vue 在 localhost:8080 上提供文件时。

以上是关于如何在生产环境中代理 Vue.js 中的 URL 调用?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Vue.js 开发环境中使用相对路径

我怎么知道 Vue.js 环境是开发环境还是生产环境?

一次生产上由于Nginx引起的HTTP请求Header参数丢失的问题

Vue.js 生产环境部署

在React中使用代理进行生成时为生产设置基本URL

我如何管理 Angular 10 中的 CORS 错误?我已经使用代理,但我需要生产解决方案 [关闭]