vue axios 跨域
qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.
1. qs.parse()将URL解析成对象的形式
2. qs.stringify()将对象 序列化成URL的形式,以&进行拼接
var params = {
categoryId: this.value,
startTime: this.Date2Str(new Date(this.value4[]), "yyyy MM dd hh:mm:ss"),
endTime: this.Date2Str(new Date(this.value4[]), "yyyy MM dd hh:mm:ss"),
actionCount: this.inputAccount,
actionDesc: this.textarea3,
actionPrice: this.inputPrice,
state: this.value3 ? : ,
//actionImg: this.actionImg,
currentNum: this.currentNum,
successNum: this.successNum,
actionCreateTime: this.Date2Str(new Date(), "yyyy MM dd hh:mm:ss")
}
console.log(params);
this.axios.post('http://192.168.2.88:8080/lbsSharing/action/addAction', qs.stringify(params)).then(function (response) {
that.$router.push({path: '/activeList'})
}).catch(function (response) {
console.log(response);
});
在axios-cross 项目中安装http-proxy-middleware中间件作为代理
npm install -S http-proxy-middleware
为http-proxy-middleware这个中间件进行本地代理配置,在axios-cross 项目中找到config/index.js
'use strict'
// Template version: 1.2.6
// see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = {
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { // 在这里配置如下代码
'/api': {
target:'http://api.jisuapi.com/XXXXX', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写,
'^/api': '/api' // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
}
}
},
jsonpData: function() {
var url = '/api'; // 这里就是刚才的config/index.js中的/api
this.$axios.get(url)
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
// 或者使用以下代码也可
/*this.$axios({
method: "get",
url: url,
data: {
name: "axios",
id: "1"
}
})
.then(function(res) {
console.log(res);
})
.catch(function(err) {
console.log(err);
});*/
}
vue axios 跨域的更多相关文章
- vue axios跨域
现在应用都是前后端分离,这也造成前端在调用接口时出现跨域问题,在控制台会这样提示 ,如果有类似于此图的提示,就已经表明你的接口调用出现了跨域问题,此文章是我对于vue跨域其中一种方式的一些经验,如果错 ...
- VUE AXIOS 跨域问题
背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...
- vue+axios跨域解决方法
通过这种方法也可以解决跨域的问题. 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 例如请求的url:“http://f.apiplus.cn/bj11x ...
- vue axios跨域请求,apache服务器设置
问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...
- Vue axios 跨域访问Session,两次得到的Session不是同一个Session
这个问题是因为,后台无法确认你是同一个“人”访问服务器,两次访问都给了你一个全新的Session,所以第一次保存的信息第二次请求无法得到,我的理解是,在跨域中,携带Cookie信息访问,即可让服务器确 ...
- vue axios跨域请求,代理设置
在config下的index.js中的dev下的 proxyTable{}中设置代理 proxyTable: { '/api': { target: 'http://10.0.100.7:8081', ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...
随机推荐
- JButton ButtonClickTest
package com.example.test; import java.awt.EventQueue; import javax.swing.JFrame; import javax.swing. ...
- svn跨多个版本比较
由于一些原因某个路径下的 svn revision 不是连续的,在比对时需要跨多个版本进行比较,使用下面步骤 Show_log -> 按住 ctrl 键选择不同版本 -> 右键 -> ...
- scala中的self type
scala目前的书籍有两<快学scala>和<scala编程>.资料确实不多,对这个语法使用只能结合使用进行理解. 先看源码: private[spark] trait Act ...
- 多线程学习-基础(十三)(学习参考·网摘) ArrayBlockingQueue源代碼解析(base jdk 1.8)
前记: 这个得首先声明一下,以下大部分内容均参考于:https://blog.csdn.net/wx_vampire/article/details/79585794,本随笔只作为学习作用,侵权删! ...
- 原来腾讯安全中心TP和虚拟机vmware10是有冲突的
用VMware 10启动linux,总是出现VMware Workstation 不可恢复错误: (vmx)... 然后网上查了好多类似问题始终不能解决.后来发现每次出现这个问题腾讯的TP是启动的 ...
- winform GDI基础(一)
1获取画布 (1)从PaintEventArgs类中获取画布 private void Form1_Paint(object sender, PaintEventArgs e) { Graphics ...
- (转)深入研究 蒋金楠(Artech)老师的 MiniMvc(迷你 MVC),看看 MVC 内部到底是如何运行的
前言 跟我一起顺藤摸瓜剖析 Artech 老师的 MiniMVC 是如何运行的,了解它,我们就大体了解 ASP.NET MVC 是如何运行的了.既然是“顺藤摸瓜”,那我们就按照 ASP.NET 的执行 ...
- P3897 [湖南集训]Crazy Rabbit
\(\color{#0066ff}{ 题目描述 }\) 兔子们决定在自己的城堡里安排一些士兵进行防守. 给出 n 个点的坐标,和城堡里一个圆心在原点的圆形的障碍,兔子们希望从中选出 k 个兔子,使得它 ...
- P4841 城市规划 FFT+生成函数
\(\color{#0066ff}{ 题目描述 }\) 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了. 刚才说过, 阿狸的国家有n个城市, 现在国家需要在某些城市对之间建立一些贸易路线, 使 ...
- P4213 【模板】杜教筛(Sum) min_25筛
\(\color{#0066ff}{ 题目描述 }\) 给定一个正整数\(N(N\le2^{31}-1)\) 求 \(ans_1=\sum_{i=1}^n\varphi(i)\) \(ans_2=\s ...