vue开发中的跨域问题
跨域产生的原因
跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,同源是指:域名、协议、端口相同
http://host:port
在http协议中,host不同,port不同
在对后端数据进行请求时将会遇到 Access-Control-Allow-Origin
这就是出现跨域被浏览器拦截了
解决方案
在vue设置中使用代理将请求转发到指定的host:ip
开发阶段可以像下面这样配置
config/index.js中添加
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target : 'http://host:port', //代理url
changeOrigin: true,
pathRewrite: {
'^/api': '/api' // 重写
}
}
},
// 部署环境的ip
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}
}
部署到服务器上时需要将host和port改为服务器的value
ps:在本地开发时候使用代理后请求的url还是
http://localhost:port
可以使用全局变量
创建文件/src/base.vue
// 全局url设置
<script>
const BASE_URL='http://localhost:8080'
export default{
BASE_URL
}
</script>
随后在app.vue挂载该vue文件
请求接口时
如axios等
url:this.GLOBAL.BASE_URL + "/api/"
部署到服务器时只需将BASE_URL和config/index.js中的value设置为服务器host:port即可正常使用