vue 配置proxy 解决跨域

前言：现在开发大多是前后端分离，在调接口调时候，必然会出现跨域的问题，可以后台配置解决，也可以前端配置。vue 最常用的就是配置proxy 来解决。具体如下：

1）首先在最外层新建vue.config.js 。在里面配置。一下，所有访问以/admin,/api 开头的接口，都会被代理，访问到下面target  的网络地址。

 pathRewrite 为替换的地址，意思为把 /admin 或者  /api  在请求接口是替换为什么，我的就是替换为空。

module.exports = {
    devServer: {
        overlay: {
            // 让浏览器 overlay 同时显示警告和错误
            warnings: true,
            errors: true
        },
        host: 'localhost',
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: true, // 配置自动启动浏览器
        hotOnly: true, // 热更新
        proxy: {
            '/admin': {
                target: `http://xx.xxx.xxx.xxx/`, //访问的服务器地址
                changeOrigin: true,
                ws: true, //启用websockets
                pathRewrite: {
                    '^/admin': ''  //替换规则
                }
            },
            '/api': {
                target: `http://xx.xxx.xxx.xxx/`,
                changeOrigin: true,
                ws: true,    
                pathRewrite: {
                    '^/api': ''
                }
            },
        },
        headers: {
            'Access-Control-Allow-Origin': '*',
        }
    }
};

2.定义接口时如下

// 接口地址为  /admin/user/login

//请求地址
  axios.post(`/admin/admin/user/login`, params).then(...)

// 因为我把/admin 替换为空，所以我要在下面多拼接一个/admin，请求的时候就会变成 hTTP://XX.XXX.XXX.XXX/admin/user/login

// 这个地方可以根据自己代码自行分配

最后，重启项目，vue 就解决了跨域