npm安装axios

npm install axios --save

引入axios

import axios from 'axios'

使用axios

mounted () {
this.getHomeInfo()
},
methods: {
getHomeInfo () {
//跨域请求可以在config/index.js中进行配置
axios.get('/zt/api/app_dujia/index.php')
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
console.log(res)
}
}

开发环境配置请求接口config/index.js
配置多个跨域接口

proxyTable: {
'/api' : {
target: 'https://touch.dujia.qunar.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/zt' : {
target: 'https://zt.dujia.qunar.com',
changeOrigin: true,
pathRewrite: {
'^/zt': ''
}
}
},

参考链接:【VUE】一个简单常用的proxyTable配置
参考链接:webpack中代理配置(proxyTable)
使用webpack+axios修改ProxyTable错误之504
axios与jsonp
————————————————
版权声明:本文为CSDN博主「weixin_43756060」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43756060/article/details/86479904

vue中使用axios进行ajax请求数据(跨域配置)的更多相关文章

  1. Vue中使用axios发送ajax请求

    作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...

  2. ajax请求ashx跨域问题解决办法

    ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng  ...

  3. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法

    问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...

  5. vue3中使用axios如何去请求数据

    在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...

  6. 【Vue+Node】解决axois请求数据跨域问题

    项目基于Vue前端+Node后台,启动两个服务,请求数据时,端口不一致造成跨域报错: (No 'Access-Control-Allow-Origin' header is present on th ...

  7. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  8. SpringMVC处理ajax请求的跨域问题和注意事项

    .首先要知道ajax请求的核心是JavaScrip对象和XmlHttpRequest,而浏览器请求的核心是浏览器我的个人博客(基于SSM,Redis,Tomcat集群的后台架构) github:htt ...

  9. jQuery解决ajax请求的跨域问题

    这两天工作中频繁的遇到JS的跨域问题,都通过绕开ajax请求的方式.特地百度了一下,把跨域问题解决了.在这分析一下 首先贴上js的页面代码: <html> <head> < ...

随机推荐

  1. elasticsearch ik同义词

    由于elasticsearch 更新实在太快,配置同义词的资料层次不齐,费尽千辛万苦终于找到了.本文通过一个同义词搜索的简单实例来说明ik同义词的配置. 环境介绍 这点很重要,本文是基于elastic ...

  2. PeriscopeHeartAnimation

    // // ViewController.m // PeriscopeHeartAnimation // // Created by ldj on 4/28/15. // Copyright (c) ...

  3. hook declined to update refs/heads/dev

    提交一个项目,push的时候,报错: warning: Large files detected. remote: error: File TaodangpuAuction/TaodangpuAuct ...

  4. ucoreOS_lab5 实验报告

    所有的实验报告将会在 Github 同步更新,更多内容请移步至Github:https://github.com/AngelKitty/review_the_national_post-graduat ...

  5. react.js父子组件通信

    这里通过todolist的功能来说明 父组件: import React,{ Component,Fragment } from 'react'; import TodoItem from './To ...

  6. 记录console的使用

    一般信息:console.info("这是info") 除错信息:console.debug() 警告提示:console.warn() 错误提示:console.error() ...

  7. 6-SQL子查询

    (1) 什么是关联子查询,什么是非关联子查询 (嵌套查询) 子查询从数据表中查询了数据结果,如果这个数据结果只执行一次,然后这个数据结果作为主查询的条件进行执行,那么这样的子查询叫做非关联子查询. 如 ...

  8. redis删除策略

    redis 设置过期时间 Redis 中有个设置时间过期的功能,即对存储在 redis 数据库中的值可以设置一个过期时间.作为一个缓存数据库,这是非常实用的.如我们一般项目中的 token 或者一些登 ...

  9. Linux 安装并配置zsh

    1. 安装zsh,配置agnoster主题 1.1 安装zsh $ sudo apt-get install -y zsh 1.2 安装oh-my-zsh $ sh -c "$(curl - ...

  10. MQTT linux centOS7 部署

    系统版本centos7 X64 1.设置保存安装包路径 # cd /usr/local/src 2.开始下载源包 官网资源: https://mosquitto.org/files/source/ # ...