tnblog
首页
登录

vue使用axios调用接口,解决跨域

246人阅读 2020/7/8 11:36 总访问:275394 评论:12 手机 收藏
分类: 前端

一.先下载axios依赖

npm install axios


二.在需要的地方引入

import axios from 'axios'



三.环境准备好了之后就可以使用axios调用接口了

简单语法:
axios.get("url",{参数}).then(function(response){

});

例子:



四.解决跨域

如果直接这样调用是会存在跨域的


新版本可以在webpack.config.js中的devServer去配置跨域

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    proxy: {
      '/api': {
        //是否允许跨域
        changeOrigin: true,
        target: 'http://m.tnblog.net/api/v1/home/1'
      },
      '/myapi': {
        //是否允许跨域
        changeOrigin: true,
        target: 'http://localhost:7324'
      }
    }
  },

try again在调用试试,这样配置后我们就可以使用/myapi,来替代http://localhost:7324这个地址了。

axios.get("/myapi/api/dept/6").then(function(response){
    console.log(response);
});

还是不行会报404的错误


我们在去配置一个pathRewrite,也就是路径重写,就可以解决这个404的问题了

可以看到已经得到结果了


特别注意:修改了配置文件后,把vue服务停止了在重启一下,不然是没有效果的。他这个跨域的解决方法其实就是中间加了一层代理而已



五.全局引用axios

上面的引用方式在需要的地方引用,每次都要引用就会很麻烦,我们可以在main中全局引用一下,其他地方都可以用了

import axios from 'axios'
//全局引用axios
Vue.prototype.$http = axios




然后使用的时候就可以用vue的对象直接点$http出来使用了,这个名字是可以随便取得


例如:


写完手工....准备吃饭



评价
你是我最重要的决定
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2020TNBLOG.NET