vue-axios跨域使用1.0

使用 npm:

$ npm install axios

使用webstrom创建一个vue项目 截图如下
图片.png

1打开跨域请求代理

config/index.js
module.exports{
dev: {
}
}
本人如下

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/doubai_api':{
        target: 'http://api.douban.com',
        pathRewrite: {
          '^/doubai_api': ''
        },
        changeOrigin: true
      }


    },
      }

2在main.js中导入如下配置

import Axios from 'axios'
Vue.prototype.$axios = Axios
Vue.config.productionTip = false
Vue.prototype.HOST = '/doubai_api'

3在HelloWrold.vue组件中使用

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    var url = this.HOST + '/v2/movie/in_theaters'
    this.$axios({
      method: 'get',
      url: url
    })
      .then(res => {
        console.log(res.data)
      })
      .catch(error => {
        console.log(error)
      })
  }
}

启动项目


图片.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,287评论 0 2
  • 从18年7月16号入职到现在已经5个月多了,入职之后就一直使用vue,来这边温习记录下使用的步骤。在我的理解中vu...
    好市民学编程阅读 2,201评论 2 12
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,415评论 1 22
  • Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Axios的中文文...
    李亚_45be阅读 10,165评论 1 8
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,210评论 1 4

友情链接更多精彩内容