06 vue中使用axios跨域

本节将展示如果通过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并展示数据。

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

时间: 2024-11-05 22:35:33

06 vue中使用axios跨域的相关文章

axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数

1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts 页面引入 import ECharts from 'vue-echarts' import ECharts from 'vue-echarts' import 'echarts/lib/chart/line' // 折线图 import "echarts/lib/component/title&q

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

vue.js学习之 跨域请求代理与axios传参

vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

nuxt中-axios跨域- 服务器端渲染

今天在做项目中,遇到一个问题,在一个点击事件中利用axios发请求,出现了跨域问题,之前都是直接用的服务器端渲染,然后就一直没出现,还是解决了很久的,所以决定把问题及解决方案记录下来. tree.vue : 最终解决方案 在nuxt项目中的server文件中的index.js中拦截一个地址替我们发这个请求, server/index.js或者vue中的server.js 此时就需要在我们的点击事件中请求我在server的index.js的地址,及   /api/user/login 页面地址:t

Vue之Axios跨域问题解决方案

// axios 中的GET请求 axios.get('/user', { params: { ID: '001' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // axios 中的POST请求 axios.post('/user', { firstName: '1', lastName: '2' }) .then(func

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

vue中使用axios最详细教程

前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype.$axios = axios; import QS from 'qs' Vue.prototype.qs = QS; 封装好的axios,拿走不送:(最好是在main.js同级目录创建一个 https.js 文件,复制粘贴下面代码,改 接口地址 就可以用) import axios from 'ax

vue中采用axios发送post请求

这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 1 let qs = require

在Vue中如何使用axios跨域访问数据(转)

最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东.越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护.那么这个axios怎么用呢,上网搜索了一大堆,基本上都是雷同,我也不知道那些作者有没有在本地测试过.至少我按照网上的做法,总不能成功.经过几天的奋斗,我终于把它搞清楚了,为了不让其他的小伙伴们走弯路,我把我在实际操作中的例子分享给大家,希望对大家有用. 一.安装axios 老规矩,要想使用axios,我们得安装它