脚本宝典收集整理的这篇文章主要介绍了

VUE跨域问题

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

vue-cli项目中,解决跨域问题。

在config > index.js 文件中的proxyTable里边添加'/api'配置

proxyTable: {
  '/api': {
    // 跨域域名
    target: 'http://www.xxxxx.cn',
    // 是否跨域
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},

在vue组件中使用

methods: {
    // 加载数据
    getUserInfo () {
      this.$axios.get('api/mall/servlet/json?funcNo=3040')
      // this.$axios.get('http://www.xxxxx.cn/mall/servlet/json?funcNo=3040')
        .then(this.handleGetUserInfoSucc)
        .catch(error => console.log(error))
    }
}    

需要重新运行项目,不然会报错

重新运行项目后本地开发就不会出现跨域问题了。

当项目打包,放到服务器上,会报错

Failed to load resource: the server responded with a status of 404 (Not Found)

开发的时候用的dev_server只针对开发用的,打包后dev_server这块配置的请求代理已经无效。

这时直接将域名放到get中,打包放到服务器

methods: {
    // 加载数据
    getUserInfo () {
      // this.$axios.get('api/mall/servlet/json?funcNo=3040')
      this.$axios.get('http://www.xxxxx.cn/mall/servlet/json?funcNo=3040')
        .then(this.handleGetUserInfoSucc)
        .catch(error => console.log(error))
    }
}   

总结

以上是脚本宝典为你收集整理的

VUE跨域问题

全部内容,希望文章能够帮你解决

VUE跨域问题

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过