腾讯实习——Vue解决跨域请求

腾讯实习——解决Vue跨域请求的问题

初来乍到，第一个任务是搞一个前端页面的开发工作，接手的是一个Vue项目。
讲道理我是不怎么懂Vue的，但凭着之前小程序开发的经验，跌跌绊绊也算跑起来了。
这时第一个问题出现了，一片通红，请求报错“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
这个我懂，就跨越的问题，配置一下就好了呗
接下来开始了踩坑之路。。。。。。。。

写跨域配置

打开配置文件，发现前人已经写好了跨域配置，检查几遍也没啥问题啊，但为啥就是不行呢。

经过一波疯狂搜索，发现竟然是vue里面请求的url都写死了。。。。。
意思是所有的请求都没有过跨域配置，这可咋办。。。。。
要是只有一两个请求还好，就都改过来了就行了呗，但这特么的四五十个api，全改总觉得很蠢
于是乎我开始寻找有没有什么其他的解决方案，问了一个老哥，老哥说前一位跟他说这套代码有两份，一套调试用，一套部属用。但调试用的不在仓库，意思是我只能一行一行改了。。。。

慢慢改吧。。。估计之所以会把URL写死是为了避免线上部署出什么纰漏吧。

总结一下Vue的跨域请求配置方法

这里主要讲一下脚手架Vue项目的跨域配置
首先要在config.js中这样配置
比如，我们想请求http://aa/bb/ccc/quary这个接口

module.exports = {
    publicPath: "./",
    devServer: {
        disableHostCheck: true,
        proxy: {  //配置跨域
            '/balabala': { //axios中请求的URL
                target: 'http://aa/bb/ccc', //实际要请求的URL
                changOrigin: true,  //是否允许跨域
                pathRewrite: {
                    '/balabala': ''  //路径重写
                },
            },
        }
    }
}

axios中要这样写

    await axios
        .get('balabala/quary')
        .then(response => {
          queryinfo = response.data['data'];
        })
        .catch(function (error){
          console.log(error);
        });

服务器收到balabala/quary这个URL后会在跨域配置文件中进行匹配，找到对应的请求规则后将URL按着pathRewrite进行重写，在这个例子中balabala/quary中的balabala会被替换成空，所以最终URL会变成http://aa/bb/ccc/quary,至此就完成了一波跨域请求。

先写到这，接着改代码去了。