码迷,mamicode.com
首页 > 移动开发 > 详细

06 vue中使用axios跨域

时间:2020-03-29 23:55:17      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:返回   路径   nodejs   约束   需要   view   tar   ken   save   

本节将展示如果通过axios+proxyTable完成跨域请求并显示数据。

1、前提约束

完成nodejs,vue-cli,webpack,webpack-dev-server的安装
https://www.jianshu.com/p/eb4d9e132f62

2、操作步骤

cd vue-easytable
cnpm install axios --save-dev
  • 修改main.js,加入以下内容:
import axios from ‘axios‘
axios.defaults.headers.common[‘token‘] = ‘‘
axios.defaults.headers.post[‘Content-type‘] = ‘application/json‘
axios.defaults.baseURL = ‘http://localhost:8080/api‘
  • 修改HelloWorld.vue,内容如下:
<template>
  <div class="tablePage">
    <h1>表格+分页</h1>
    <v-table
      :columns="tableConfig.columns"
      :table-data="tableConfig.tableData"
      :paging-index="(pageIndex-1)*pageSize"
    ></v-table>
  </div>
</template>
<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      pageIndex: 1,
      pageSize: 10,
      total: ‘‘,
      tableConfig: {
        tableData: [],
        columns: [
          {
            field: ‘id‘,
            title: ‘编号‘,
            width: 50,
            columnAlign: ‘center‘
          },
          {
            field: ‘name‘,
            title: ‘姓名‘,
            width: 120,
            columnAlign: ‘center‘
          }
        ]
      }
    }
  },
  methods: {
    query () {
      this.$axios.get(‘cms/page/query/‘).then( res=> {
        this.tableConfig.tableData = res.data.data;
      })
    }
  },
  mounted () {
    this.query()
  }
}
</script>
  • 修改config/index.js中的proxyTable标签
proxyTable: {
      ‘/api‘: {
        target: ‘http://localhost:31001‘, // 请求的接口的域名
        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
        pathRewrite: {
          ‘^/api‘: ‘‘
        }
      }
  • 提供第三方api,路径为localhost:31001/cms/page/query且为GET类型,返回的数据如下json格式:
{"data":[{"id":1,"name":"ali"},{"id":2,"name":"xiaoli"}]}
  • 启动项目,访问首页面,便能看到如下结果:
    技术图片
    以上就是vue中通过axios访问第三方api并展示数据。

06 vue中使用axios跨域

标签:返回   路径   nodejs   约束   需要   view   tar   ken   save   

原文地址:https://www.cnblogs.com/alichengxuyuan/p/12558552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!