什么是跨域?
跨域,指浏览器不能执行其他浏览器的脚本,他是由浏览器的同源策略造成的。是浏览器对javaScript实施的安全限制。
同源指,域名、协议、端口统一一致。
解决的方案:
对于使用vue的同学来讲,目前使用vue框架时,经常遇见跨域的问题,在项目时如果后端没有给我们解决跨域,就需要我们自己去配置跨域的文件。
在vue的根目录里新建 vue.config.js 文件,通过代理的方式解决跨域的问题,保存再启动项目即可。
//暴露对象
module.exports = {
//服务器代理
devServer: {
//代理
proxy: {
//配置名称
'/api': {
// 你要访问的目标地址
target: 'http://127.0.0.1:8000/',
//允许跨域
changeOrigin: true,
//路径重写
pathRewrite: {
'^/api': '' // 需要重写的地址
}
}
}
}
}
//多路由域名的代理,复杂写法:
module.exports={
devServer: {
//代理
proxy: {
//配置名
'/api': {
//代理地址,目标服务器
target: 'http://localhost:3000',
changOrigin:true
},
'/captcha': {
//代理地址,目标服务器
target: 'http://localhost:3000'
},
'/register': {
//代理地址,目标服务器
target: 'http://localhost:3000'
},
'/login': {
//代理地址,目标服务器
target: 'http://localhost:3000'
},
}
}
}
建议前端开发的小伙伴们,请求数据时配置一下config.js文件,有时后端人员忘记处理跨域了,我们也可以获取到数据请求。