调用后端接口访问后台数据，但是因为请求url的协议、域名、端口三者之间任意一个与当前页面url不同产生了跨域，而且后端也没有配置允许跨域（后端如果配置跨域通常是cors），所以前端就要配置跨域，Vue跨域在vue.config.js文件（这个文件要自己添加）里配置。
后端提供的数据接口为：localhost:3000/web/news/list
注：该例子是由本地node提供的接口，因为端口不同，也产生了跨域。
当然在服务端也可以通过安装cors插件配置跨域。
未配置前
WeChat8cf24d6c93d55a5e65bab2e20f78cd78.png
在当前文项目根路径新建一个文件，文件名固定为vue.config.js
module.exports = {
// pabulicPath:process.env.NODE_ENV === 'production' ? '' : '',
devServer:{
host:'0.0.0.0',
port:'8080',
// https:false,
open:true,
//以上的ip和端口是我们本机的;下面为需要跨域的
proxy:{ //配置跨域
'/api':{
target:'http://localhost:3000/web',
ws:true,
changeOrigin:true,//允许跨域
pathRewrite:{
'^/api':'' //请求的时候使用这个api就可以
}
}
}
}
}
调用跨域接口
methods: {
getData(){
var param = {
params:{
devid:'8479593759372',
user:'akdi',
key:'8aad46f68c77e83ee2bcc3d9f9ec818a'
}
}
this.$http.get('/api/news/list',param).then(res=>{
console.log(res)
})
}
}
成功拿到数据
image.png
const http = axios.create({
// baseURL:'http://localhost:3000/web/api',
})
