Vue 配置代理

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

版本： vue-cli 3.0以上

修改文件位置：根目录下的vue.config.js

代码：

devServer: {

    proxy: {

        '/api': {

            target: 'http://192.168.123.123:8080',  // 后台接口地址

            ws: true,        //如果要代理 websockets，配置这个参数

            secure: false,  // 如果是https接口，需要配置这个参数

            changeOrigin: true,  //是否跨域

            pathRewrite:{    // 重写路径

                '^/api':''

            }

        }

    }

}

vue项目里，我的所有接口的地址都是/api开头的，所以前面用 ‘/api’，如果我的开头是/pc开头，但是接口没有/pc这时候会用到路径重写，下面有介绍。
当node服务器遇到以 ‘/api’ 开头的请求，就会把 target 字段里的值加上，那么请求地址就为变成了http://192.168.123.123:8080/api/xxxx/xxx

pathRewrite 表示的意思是把/api 替换为空，那么请求地址就为 http://192.168.123.123:8080/xxxx/xxx(如果是/pc，就把pc替换为空)

注意2：在本地查看地址的时候，地址不会更改，还是http://localhost:8090/api/xxx/xxxxx，看起来/api和target的地址没有替换，但实际已经替换了。

刚接触的对pathRewrite不是很懂，把他的中文意思理解为重新写了/api的路径，调用时就不加/api了，这个理解是错误的，他其实就是吧/api替换为空，如果还报错就查一查看看是不是提交的方法问题，比如 get 和 post 没区分开。

巴特西

Vue 配置代理

最新文章

热门文章