qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 
1. qs.parse()将URL解析成对象的形式

2. qs.stringify()将对象 序列化成URL的形式,以&进行拼接

  1. var params = {
  2. categoryId: this.value,
  3. startTime: this.Date2Str(new Date(this.value4[]), "yyyy MM dd hh:mm:ss"),
  4. endTime: this.Date2Str(new Date(this.value4[]), "yyyy MM dd hh:mm:ss"),
  5. actionCount: this.inputAccount,
  6. actionDesc: this.textarea3,
  7. actionPrice: this.inputPrice,
  8. state: this.value3 ? : ,
  9. //actionImg: this.actionImg,
  10. currentNum: this.currentNum,
  11. successNum: this.successNum,
  12. actionCreateTime: this.Date2Str(new Date(), "yyyy MM dd hh:mm:ss")
  13. }
  14. console.log(params);
  15. this.axios.post('http://192.168.2.88:8080/lbsSharing/action/addAction', qs.stringify(params)).then(function (response) {
  16. that.$router.push({path: '/activeList'})
  17. }).catch(function (response) {
  18. console.log(response);
  19. });
在axios-cross 项目中安装http-proxy-middleware中间件作为代理
  npm install -S http-proxy-middleware
  1. http-proxy-middleware这个中间件进行本地代理配置,在axios-cross 项目中找到config/index.js
  2. 'use strict'
  3. // Template version: 1.2.6
  4. // see http://vuejs-templates.github.io/webpack for documentation.
  5.  
  6. const path = require('path')
  7.  
  8. module.exports = {
  9. dev: {
  10.  
  11. // Paths
  12. assetsSubDirectory: 'static',
  13. assetsPublicPath: '/',
  14. proxyTable: { // 在这里配置如下代码
  15. '/api': {
  16. target:'http://api.jisuapi.com/XXXXX', // 你请求的第三方接口
  17. changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
  18. pathRewrite:{ // 路径重写,
  19. '^/api': '/api' // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
  20. }
  21. }
  22. },
  1. jsonpData: function() {
  2. var url = '/api'; // 这里就是刚才的config/index.js中的/api
  3. this.$axios.get(url)
  4. .then(function(response) {
  5. console.log(response);
  6. })
  7. .catch(function(error) {
  8. console.log(error);
  9. });
  10. // 或者使用以下代码也可
  11. /*this.$axios({
  12. method: "get",
  13. url: url,
  14. data: {
  15. name: "axios",
  16. id: "1"
  17. }
  18. })
  19. .then(function(res) {
  20. console.log(res);
  21. })
  22. .catch(function(err) {
  23. console.log(err);
  24. });*/
  25.  
  26. }

vue axios 跨域的更多相关文章

  1. vue axios跨域

    现在应用都是前后端分离,这也造成前端在调用接口时出现跨域问题,在控制台会这样提示 ,如果有类似于此图的提示,就已经表明你的接口调用出现了跨域问题,此文章是我对于vue跨域其中一种方式的一些经验,如果错 ...

  2. VUE AXIOS 跨域问题

    背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...

  3. vue+axios跨域解决方法

    通过这种方法也可以解决跨域的问题. 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 例如请求的url:“http://f.apiplus.cn/bj11x ...

  4. vue axios跨域请求,apache服务器设置

    问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...

  5. Vue axios 跨域访问Session,两次得到的Session不是同一个Session

    这个问题是因为,后台无法确认你是同一个“人”访问服务器,两次访问都给了你一个全新的Session,所以第一次保存的信息第二次请求无法得到,我的理解是,在跨域中,携带Cookie信息访问,即可让服务器确 ...

  6. vue axios跨域请求,代理设置

    在config下的index.js中的dev下的 proxyTable{}中设置代理 proxyTable: { '/api': { target: 'http://10.0.100.7:8081', ...

  7. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  8. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

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

    1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...

随机推荐

  1. rest-framework组件 之 认证与权限组件

    浏览目录 认证组件 权限组件 频率组件 认证与权限组件 认证组件 局部视图认证 在app01.service.auth.py: class Authentication(BaseAuthenticat ...

  2. delete请求,删除不成功?

    因为,在数据库底层,其实并没有删除该数据,只是将数据的标识设置为is_deleted.因此,最后即使删除了,查询的时候还是会显示在界面. 故,需要重写get请求.

  3. Mybatis避免出现语法错

    在使用MyBatis的时候,可能会看起来没有问题,但是代码运行的时候出现意想不到的错误. 看如下代码: <update id="updateByPrimaryKeySelective& ...

  4. git仓库迁移的解决方案

    一.问题 在github中遇到感兴趣的项目,直接克隆下来,随着兴趣越来越浓,在本地做了些修改,后来干脆想fork到自己的github仓库,又要把本地的修改提交到fork后的自己的github仓库中.这 ...

  5. .Net Core Api 使用版本控制

    1,安装Microsoft.AspNetCore.Mvc.Versioning NET Core Mvc中,微软官方提供了一个可用的Api版本控制库Microsoft.AspNetCore.Mvc.V ...

  6. git CVE-2014-9390 验证以及源码对比

    一 验证部分 首先在ubuntu下面建立如下工程 mkdir repo cd repo git init mkdir -p .GiT/hooks cp post-checkout .GiT/hooks ...

  7. [SinGuLaRiTy] NOIP模拟赛(TSY)-Day 2

    [SinGuLaRiTy-2033] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved.                              ...

  8. 【转】ROWNUM与ORDER BY先后关系

    源地址:http://www.cnblogs.com/accumulater/p/6137385.html

  9. NOIWC2019游记

    更新完了? ghj1222这个智障因为NOIP考的太菜没有去THUWC和PKUWC,但是NOIWC还是苟进去了 由于已经结束了,好多事实忘了,所以可能不完整 2019/1/23 Wednesday 明 ...

  10. linux物理内存管理

    1.为什么需要连续的物理内存: Linux内核管理物理内存是通过分页机制实现的,它将整个内存划分成无数个4k(在i386体系结构中)大小的页,从而分配和回收内存的基本单位便是内存页了.利用分页管理有助 ...