zoukankan      html  css  js  c++  java
  • 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('请求失败')
                })
            },

    问题解决!!!

  • 相关阅读:
    《Java技术》第四次作业
    Java第三次作业——面向对象基础(封装)
    《Java技术》第二次作业
    #《Java技术》第一次作业
    Java第十次作业
    Java第九次作业
    Java第八次作业
    Java第七次作业
    Java第6次作业
    Java第五次作业
  • 原文地址:https://www.cnblogs.com/erlou96/p/12869488.html
Copyright © 2011-2022 走看看