vue axios 跨域代理多个域名 和 网站 basic auth 身份认证

 问题一：用vue +axios 跨域访问多个不同的域

解决方法：

在 vue.config.js 文件中 devServer中添加

 

 

devServer: {
    proxy: {
        '^/api/': {
            target: 'https://www.sougou.com/', 
            ws: true,  // proxy websockets 
            changeOrigin: true,  //允许跨域
            pathRewrite: {
                '^/api/': '/'  // rewrite path
            }
        },
        '^/api2/': {
            target: 'https://www.baidu.com/',  
            ws: true,  // proxy websockets 
            changeOrigin: true,  //允许跨域
            pathRewrite: {
                '^/api2/': '/'  // rewrite path
            }
        },
        
    }
}

 

附上：测试代码

test2 () {
            console.log('test2')
            axios.get('/api/').then((response) => {
                if (response.data) {
                    console.log(response.data)
                }
            }).catch(err => {
                alert('请求失败')
            })
        },
 test3 () {
            console.log('test3')
            axios.get('/api2/').then((response) => {
                if (response.data) {
                    console.log(response.data)
                }
            }).catch(err => {
                alert('请求失败')
            })    

 

请求结果如下：

 

 

问题二：网站的 身份认证 basic auth 

解决方法：在get时请求，加一个auth 认证

{
     auth: {
                username: 'admin',
                password: 'admin'
            } 
}

示例：

test () {
            console.log('test')
            axios.get('/api/v1/cluster', { auth: {
                username: 'admin',
                password: 'admin'
            } }).then((response) => {
                if (response.data) {
                    console.log(response.data)
                }
            }).catch(err => {
                alert('请求失败')
            })
        },

问题解决！！！