elementui反向代理配置

最新推荐文章于 2022-08-05 10:22:48 发布

原创最新推荐文章于 2022-08-05 10:22:48 发布 · 428 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在前后端分离的项目中，如何配置URLMapping和后台处理地址。在.env.development文件中，设置VUE_APP_BASE_API为'/api'，用于定义前端访问后台的路径。在vue.config.js中，使用Proxy配置代理，将请求转发到指定的后台服务器地址，例如'http://10.91.1.145:8062/api'，并启用changeOrigin以实现跨域访问。通过这种方式，实现了前端与后台的通信连接。

前后端分离配置

配置URL Mapping，在文件.env.development，添加 VUE_APP_BASE_API = ‘/api’，api是访问后台应用的contextpath，根据自己应用的情况进行修改。
配置后台处理地址：修改文件vue.config.js 中Proxy部分的配置

    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://10.91.1.145:8062/api`, //修改为后台地址
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },