Vue项目代理-解决接口访问跨域问题

 

Vue解决跨域问题的原理就是代理，具体操作如下

1.打开 config -> index.js

2. 找到proxyTable

3.粘贴 如下代码，'https://www.baidu.com' 换成要访问的的api域名，记住是域名，不是整个api地址。代码（效果图）如下

配置如下（方便复制粘贴） 

 dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api':{
            target:"https://www.baidu.com/",//这里设置你要访问的域名（或IP+端口）
            changeOrigin:true,
            pathRewrite:{
                '^/base_api':''//base_api是自定义用来代替http://www.baidu.com/的

            }
        }
    }
}

Demo如下

演示调用：https://www.baidu.com/api/login

fetch("base_api/api/login", {

    method: "post",

    body: "aa"

}).then(result => {

    console.log(result);

});

不明白留言