vue设置代理

2021-02-01 17:00:08 阅读：204 来源： 互联网

标签：vue http 请求 rng 代理地址 localhost 设置 shiro

参考这个 https://www.jianshu.com/p/5ef2b17f9b25

1、介绍
这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块（这个模块相当于是node.js的一个插件）。

2、实际代码
在这里插入图片描述
我的 api=’/rng’
我的请求地址 ${api}/xxxx/xxx ，请求地址就为 ‘/rng/xxxx/xxx’
当node服务器遇到以 ‘/rng’ 开头的请求，就会把 target 字段加上，那么我的请求地址就为 http://45.105.124.130:8081/rng/xxxx/xxx
下面的 pathRewrite 表示的意思是把/rng 替换为空，那么我的请求地址就为 http://45.105.124.130:8081/xxxx/xxx（用在如果你的实际请求地址没有 rng 的情况）

再记一个示例

module.exports = {
    devServer: {
        open: true,//自动打开浏览器
        host: 'localhost',//'0.0.0.0' ip地址
        port: 8080,
        https: false, //false关闭https，true为开启
        //以上的ip和端口是我们本机的;下面为需要跨域的
        // 讲解博客 https://www.jianshu.com/p/5ef2b17f9b25
        proxy: { //配置跨域
            '/shiro': {
                target: 'http://localhost:9090/shiro/', //这里后台的地址模拟的;应该填写你们真实的后台接口
                ws: true,
                changOrigin: true, //允许跨域
                pathRewrite: {
                    '^/shiro': '' //请求的时候使用这个api就可以
                }
            }

        }
        // 当在$axios 访问 /shiro/sys/login 时，先会把 target 字段加上 ，变为
        // http://localhost:9090/shiro/shiro/sys/login，然后在 pathRewrite 里把 /shiro 换为 ''
        // 变为 http://localhost:9090/shiro/sys/login
    },
    configureWebpack: {

        performance: {
            hints: 'warning',
            //入口起点的最大体积
            maxEntrypointSize: 50000000,
            //生成文件的最大体积
            maxAssetSize: 30000000,
            //只给出 js 文件的性能提示
            assetFilter: function(assetFilename) {
                return assetFilename.endsWith('.js');
            }
        }
    },
    publicPath: './',
}

在这里插入图片描述

标签：vue,http,请求,rng,代理,地址,localhost,设置,shiro
来源： https://blog.csdn.net/qq_40820382/article/details/113523845

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue设置代理