腾讯TEG实习|腾讯实习——Vue解决跨域请求 js|vue

这里写自定义目录标题

腾讯实习——解决Vue跨域请求的问题
- 写跨域配置
总结一下Vue的跨域请求配置方法

腾讯实习——解决Vue跨域请求的问题 【腾讯TEG实习|腾讯实习——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,至此就完成了一波跨域请求。
先写到这，接着改代码去了。