vue中使用axios进行ajax请求数据(跨域配置)
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请求数据(跨域配置)的更多相关文章
- Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
- ajax请求ashx跨域问题解决办法
ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng ...
- 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法
问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...
- vue3中使用axios如何去请求数据
在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...
- 【Vue+Node】解决axois请求数据跨域问题
项目基于Vue前端+Node后台,启动两个服务,请求数据时,端口不一致造成跨域报错: (No 'Access-Control-Allow-Origin' header is present on th ...
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
- SpringMVC处理ajax请求的跨域问题和注意事项
.首先要知道ajax请求的核心是JavaScrip对象和XmlHttpRequest,而浏览器请求的核心是浏览器我的个人博客(基于SSM,Redis,Tomcat集群的后台架构) github:htt ...
- jQuery解决ajax请求的跨域问题
这两天工作中频繁的遇到JS的跨域问题,都通过绕开ajax请求的方式.特地百度了一下,把跨域问题解决了.在这分析一下 首先贴上js的页面代码: <html> <head> < ...
随机推荐
- Weblogic的三种部署方式
Weblogic的三种部署方式 在weblogic中部署项目通常有三种方式:第一,在控制台中安装部署:第二,将部署包放在domain域中autodeploy目录下部署:第三,使用域中配置文件c ...
- STM32HAL快速上手
STM32HAL快速上手 资料下载 如果在下面的网站中没有账户,建议用edu邮箱创建账户. STMicroeletronic 意法半导体官网 首页 - STMicroelectronics 意法半导体 ...
- (办公)vue下载excel,后台用post方法
后台方法的参数必须是@RequestBody修饰的. 前台关键代码: axios ( { method : 'post', url : api.exportPlayTime , // 请求地址 dat ...
- thinkphp3.2生成二维码
public function createCode() { Vendor('phpqrcode.phpqrcode'); $object = new \QRcode(); $url = 'http: ...
- 1.Python网络编程_UDP(简略版)
# -*- coding: utf-8 -*- #2019-11-24 import socket def recv(): udp_socket=socket.socket(socket.AF_INE ...
- JDK、JVM、JRE关系
开始第一个Java程序 *保证计算机当中已经安装了文本编辑器EditPlus *安装JDK[JDK一般需要从oracle的官网下载],我们这里先用的JDK7 *在安装JDK的时候有jre JDK开发需 ...
- xampp配置虚拟域名
首先使用notpad++(我用的notpad++,记事本也可以)打开(安装xampp目录下的)apach-->conf-->extra-->httpd-vhosts.conf 在文件 ...
- Onenote添加代码
使用Onenote做笔记的时候,是没有直接插入代码的,但是如果可以插入的话很方便. 这个是我找的一个参考,照这个来就行. 参考链接: https://www.cnblogs.com/two-peanu ...
- [C5W1] Sequence Models - Recurrent Neural Networks
第一周 循环序列模型(Recurrent Neural Networks) 为什么选择序列模型?(Why Sequence Models?) 在本课程中你将学会序列模型,它是深度学习中最令人激动的内容 ...
- vue-cli2 打包
npm run build 打包安装 相当于静态资源 解决vue-cli项目打包出现空白页和路径错误的问题 路径错误的问题解决方式: 打开config文件夹下的 index.js 找到如下图所示区域: ...