vue代理失败 直接访问可以

Posted 2023-03-16

参考技术A 不可以。
原本使用axios封装，在vue.config.js设置好代理，配好以后发现还是跨域了，说明代理没有生效。
解决方法：去掉这个配置的baseURL就行了，或者将baseURL改为/v1/，更新一下axios配置文件。
请求方法：api是定义的变量，vue.config.js里面代理的地址。在请求接口时，前缀只需要写类似 /apiUrl 就可以了。

vue-cli项目本地代理实现跨域请求

　　使用 Vue-cli 创建的项目，开发地址是 localhost:8080，需要访问非本机上的接口http://10.1.0.34:8000/queryRole。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置，不过 Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，通过修改vue proxyTable接口实现跨域请求，在vue-cli项目中的config文件夹下的index.js配置文件中，修改前的dev：

dev: {  
    env: require(‘./dev.env‘),  
    port: 8080,  
    autoOpenBrowser: true,  
    assetsSubDirectory: ‘static‘,  
    assetsPublicPath: ‘/‘,  
    proxyTable: {}, 
    cssSourceMap: false  
  }

　　只要修改里面的proxyTable: {}项

proxyTable: {  
    ‘/api‘: {  //代理地址  
        target: ‘http://10.1.0.34:8000/‘,  //需要代理的地址  
        changeOrigin: true,  //是否跨域  
        secure: false,    
        pathRewrite: {  
            ‘^/api‘: ‘‘   //本身的接口地址没有 ‘/api‘ 这种通用前缀，所以要rewrite，如果本身有则去掉  
        }
    }
}

　　然后重启项目npm run dev

　　请求数据时URL前加上“/api”就可以跨域请求了

self.$axios.get(‘/api/queryRole‘, {params: params})  
    .then((res) => {  
        console.log(res);  
    }).catch((err) => {  
        console.log(err);  
    })