为什么会出现跨域问题?
因为在我们前端进行后端请求的时候,违背了浏览器的同源策略
同源策略:协议、域名(IP)、端口相同即为同源。浏览器的同源策略就是一种约定。如果你违反了这个策略就会出现跨域问题。
vue出现跨域问题如何解决?
在vue.config.js中进行如下配置,开启我们的vue中的代理服务器,让代理服务器帮我我们进行对后台的访问
module.exports={
// 开启代理服务器
devServer:{
proxy:{
'/api':{
target:'http://localhost:5001', // 这里就是写我们进行访问的后台api
pathRewrite:{'^api':''}, // 这里就是将我们的请求url进行重写,让后台接收到我们的请求地址中没有我们前端进行配置的这个头api
// ws:true 支持websocked
// changeOrigin:true 用于控制请求头中的host值
},
// 如果还需要访问其他的api,可以在这里继续进行配置
}
}
}
这样就开启了我们的代理服务器,然后我们使用axios就可以进行访问:
// 这里我们的端口号还是8080,因为代理服务器会帮助我们进行对后台的访问
axios.get("http://localhost:8080/api/user").then(response => {
console.log(response.data);
})
这样就通过了我们前端进行配置,就解决了跨域的问题