前端小白的笔记

vue脚手架配置请求代理

在脚手架的vue.config.js文件中配置

module.exports = {
    devServer: {
        proxy: {
            '/myproxy': {
                target: 'http://172.0.0.1:4999/api/v1.0',
                changeOrigin: true,
                pathRewrite: {
                    '^/myproxy': ''
                }
            }
        }
    }
}

在vue文件中使用axios进行请求

import axios from 'axios'
axios.post('myproxy/login', data).then((res) => {
    if (res.status) {
      okMsg(action + '成功')
    } else {
      errMsg(action + '失败')
    }
    this.deployLoad = false
}).catch((err) => {
    errMsg(err)
})

以上就配置好，可以使用了。axios请求myproxy/login时,代理会匹配myproxy开头的请求，并将myproxy替换为target的值http://172.0.0.1:4999/api/v1.0 .所以myproxy/login会变成http://172.0.0.1:4999/api/v1.0/login .这个就是简单的原理。