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': ''//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}
}

2:在需要调接口的组件中这样使用:

axios.post('/api/yt_api/login/doLogin',postData)
.then(function (response) {
console.log(1)
console.log(response);
})
.catch(function (error) {
console.log(error);
})

  注意:原接口:http://http://121.41.130.58:9090/yt_api/login/doLogin

      页面调用:http://localhost:8081/api/yt_api/login/doLogin ——这里多了一个/api/不是多余的,不要删

二:axios传参

1:Vue官方推荐组件axios默认就是提交 JSON 字符串,所以我们要以json字符串直接拼接在url后面的形式,直接将json对象传进去就行了

let postData = {
  companyCode:'tur',
  userName:'123456789123456789',
  password:'123456'
}
axios.get('/api/yt_api/login/doLogin',{
  params: {
    ...postData,
  }
})
.then(function (response) {
  console.log(1)
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

这里我们将postData这个json对象传入到post方法中,页面中的形式为:

2:以key:val的形式传参

let postData = qs.stringify({
companyCode:'tur',
userName:'123456789123456789',
password:'123456'
})

我们需要对这个json对象操作,这里的qs你需要先安装

npm install qs

再导入

import qs from 'qs'

面中的形式为:

vue.js学习之 跨域请求代理与axios传参的更多相关文章

  1. Vue.js 2.0 跨域请求数据

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...

  2. vue-cli 3.0之跨域请求代理配置及axios路径配置

    vue-cli 3.0之跨域请求代理配置及axios路径配置 问题:在前后端分离的跨域请求中,报跨域问题 配置: vue.config.js: module.exports = { runtimeCo ...

  3. 【Java Web开发学习】跨域请求

    [Java Web开发学习]跨域请求 ================================================= 1.使用jsonp ===================== ...

  4. Jsonp的js实现,跨域请求,同源策略机制

    Jsonp的js实现,跨域请求,同源策略机制1.跨域请求:请求URL的协议,域名,端口三者之间任意一个与当前页面地址不同即为跨域 存在跨域的情况: 网络协议不同,端口不通,域名不同,子域名不同,域名和 ...

  5. MediaElement.js之浏览器跨域请求视频播放

    浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...

  6. Vue三步完成跨域请求

    三步完成跨域请求 ①main.js中: Vue.prototype.HOME = '/api'; ② config/index.js中: module.exports = { dev: { // Pa ...

  7. Django学习---jsonp跨域请求

    jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...

  8. NodeJ node.js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  9. JS 中的跨域请求

    跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及 ...

随机推荐

  1. 基于jQuery+JSON的省市县 二级 三级 联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉 ...

  2. 【HDOJ 1337】I Hate It(线段树维护区间最大值)

    Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写 ...

  3. Vuex的第一次接触

    前言:最近在做Vue实现去哪网,想要实现在城市列表页面,点击某个城市的时候,主页的头部的城市会随着改变,就是首页和城市页面有共用的数据要分享,这里使用Vuex 1. Vuex是什么? 是Vue官方推荐 ...

  4. sourcetree .git 强制忽略指定文件不提交

    在公司写项目,大部分都会用到 svn 或 git 提交代码到服务器.我们公司用的GIT,每个程序员有自己的独立分支,各写各的代码互不冲突,最终合并到主分支再解决相同代码冲突问题.这时候会遇到一些配置文 ...

  5. Email Helper

    using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; using Microsoft.Xrm.Sdk.Que ...

  6. Active Job 基础

    开发中涉及到调用三方服务API,运行时间长,结果不需要实时反馈给用户这样的任务,都可以使用异步处理.常见的场景包括:发邮件和短信.图片处理.定时清理等.爬虫. 后端处理软件可以自行选择这里选择了sid ...

  7. Hibernate学习笔记一

    1 框架体系结构 2 hibernate入门 2.1 ORM框架 Hibernate是一个数据持久化层的ORM框架. Object:对象,java对象,此处特指JavaBean Relational: ...

  8. angularjs transitions

    http://angular-transitions.mgechev.com/#/view/page1 https://scotch.io/tutorials http://stackoverflow ...

  9. Prism for WPF 搭建一个简单的模块化开发框架 (一个节点)

    原文:Prism for WPF 搭建一个简单的模块化开发框架 (一个节点) 这里我就只贴图不贴代码了,看看这个节点之前的效果 觉得做的好的地方可以范之前的文章看看 有好的建议也可以说说   填充数据 ...

  10. dubbo之基础应用

    一.Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合).从服务模型的角度来看,Dubbo采用的是一种非常简单 ...