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('请求失败') }) },
问题解决!!!