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('请求失败') }) },

问题解决！！！