在数据请求当中,由于不同源造成的跨域问题【跨域问题后面再整理写一篇】
比如我要获取拉钩网的数据,这时候就会出现跨域问题
在vue项目中处理跨域问题的配置文件是vue.config.js
可以按照这个文档来配置就行
主要用到是里面的devServer.proxy
比如我想获取拉钩网(https://m.lagou.com/listmore.json)这个数据,然后这里写下跨域问题的处理
// 这里写处理跨域问题
module.exports = {
// module.exports是common.js的模块化,node中用
devServer: {
proxy: {
// 第一个数据源
// https://m.lagou./com/listmore.json
'/listmore': {
target: 'https://m.lagou./com',
// ws: true,这个不用
// 在com之前都是域名,取域名后第一个字段
changeOrigin: true
},
// 第二个数据源
// https://sentry.music.163.com/wapm/api/sdk/collect
'/wapm': {
target: 'https://sentry.music.163.com',
changeOrigin: true
}
}
}
}
然后在mouted钩子函数中的axios中写
//! 没有跨域的情况下是写=> axios.post('https://sentry.music.163.com/wapm/api/sdk/collect'
axios.post('/wapm/api/sdk/collect', {
//这里写的是域名后面的那串
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
如第二个的post请求中的axios中的数据写在浏览器这里的这块
以第二个数据源为例,这个跨域请求的意思大概就是:
在本地的http://localhost:3000中的页面里:
axios说:“我要向https://sentry.music.163.com/wapm/api/sdk/collect 发起请求!!
我写个
axios.post(‘https://sentry.music.163.com/wapm/api/sdk/collect’”
浏览器说:“哦哟,不行,你们都不同源,不能让你随便访问别人的数据!”
axios:“那我写个反向代理!”
vue.config.js中的devServer.proxy说:“在我这里写,我负责当个中间人转接下你们的消息,
‘/wapm’: {
target: ‘https://sentry.music.163.com’,
changeOrigin: true
}”
'/wapm’表示在数据请求中,遇到 /wapm 开头的数据请求时,浏览器原本的http://localhost:3000变成https://sentry.music.163.com,这样数据请求时就同源了,这时候这个反向代理就相当于一个代理人去帮这个主机谈事情一样!!!"
axios:“那我将数据请求源写成/wapm开头那后面一段,然后反向代理一找到我这里就知道我要去哪个源拿数据啦!!!”
然后就这么和谐地解决了问题!