#yyds干货盘点#vue设置跨域proxy

创建​​vue.config.js​​文件

// 方法1
module.exports = {
    devServer: {
        host: 'localhost',
        port: '8083',
        proxy: {
            '/api': {  // /api 表示拦截以/api开头的请求路径
                target: 'http:127.0.0.1:3000', // 跨域的域名
                changeOrigin: true, // 是否开启跨域
            }
        }
    }
}

// 等同于
// 方法2
module.exports = {
    devServer: {
        host: 'localhost',
        port: '8083',
        proxy: {
            '/api': {
                target: 'http:127.0.0.1:3000/api',
                changeOrigin: true,
                pathRewrite: {  // 重写路径
                    '^/api': ''  // 把/api变为空字符
                }
            }
        }
    }
}

理解：

// 请求接口：http://127.0.0.1:3000/api/newList

// axios请求
axios({
    method: 'get',
    url: '/api/newList'
}).then(res=>{})

// 上面请求接口可以分解为 127.0.0.1:3000    /api/newList

// 方法1 理解
// 当拦截到以/api开头路径时，把设置的跨域域名与路径拼接就变为了 http:127.0.0.1:3000/api/newList

// 方法2 理解
// 当拦截到以/api开头路径时，把设置的跨域域名与路径拼接就变为了 http:127.0.0.1:3000/api/api/newList