Vue中使用axio跨域请求外部WebService接口
情景描述
前端用的是Vue框架,外部提供了一个WebService接口,返回的是XML格式的Array数列。
接口请求
在config下index.js中添加代理表解决跨域问题
proxyTable: {'/api': {target: 'http://xx.xx.xx.xx:xx/DBCenterService/WebService.asmx/GetWaterStr', // 你请求的第三方接口changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite:{ // 路径重写,'^/api': '' // 替换target中的请求地址,也就是说以后你在请求http://xx.xx.xx.xx:xx/DBCenterService/WebService.asmx/GetWaterStr这个地址的时候直接写成/api即可。}}
在相关组件中使用axios请求接口
mounted() {let url = 'api';axios.get(url).then((res) => {let xml_data = res.data;console.log(xml_data);}).catch((err) => {console.log(err)});},
配置改动后需要重启生效(运行npm run dev, 即可在控制台看到XML文件内容。
XML解析为JSON
x2js是一个在XML和JavaScript对象之间进行转换的库。转换不一定是无损的,但非常方便。
- npm安装
npm i x2js
使用
x2js.xml2js(xml) //xml2js方法,传入xml格式的数据,返回json对象
直接在组件中require()
const x2js = require('x2js')
在执行的方法中使用
var x2jsone = new x2js()var jsonObj = x2jsone.xml2js('<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soap:Body><ns1:getSDLengthByJMLXResponse xmlns:ns1="http://server.Gw"><ns1:out><?xml version="1.0" encoding="UTF-8"?><NODES><NODE><NAME>方沟</NAME><VALUE>337.9432807</VALUE></NODE><NODE><NAME>砖混</NAME><VALUE>66.8424335</VALUE></NODE><NODE><NAME>盾构</NAME><VALUE>14.8955979</VALUE></NODE><NODE><NAME>暗挖</NAME><VALUE>48.1186321</VALUE></NODE><NODE><NAME>顶管</NAME><VALUE>2.9357091</VALUE></NODE><NODE><NAME>总长度</NAME><VALUE>1272.8081174</VALUE></NODE><NODE><NAME>检查井总数</NAME><VALUE>94885</VALUE></NODE></NODES></ns1:out></ns1:getSDLengthByJMLXResponse></soap:Body></soap:Envelope>')var newjsonObj = x2jsone.xml2js(jsonObj.Envelope.Body.getSDLengthByJMLXResponse.out.__text)for(var i = 0;i<newjsonObj.NODES.NODE.length;i++){console.log(newjsonObj.NODES.NODE[i].NAME)console.log(newjsonObj.NODES.NODE[i].VALUE)}
Vue中使用axio跨域请求外部WebService接口相关推荐
- vue中使用axios跨域请求
vue中使用axios请求API或其他域名地址时,会产生跨域请求问题,应该如何解决呢?(本文以请求API为例) 解决方法: 1.为axios设置请求头.拦截器等,这里直接对axios进行封装,将其封装 ...
- ajax调用远程webservice,ajax跨域请求调用webservice接口
最近忽然想学习webservice,一直不知道如何跨域调用调用.若是都在同一个项目,相信你们都知道了?特此整理一下关键点,权当学习.javascript 1.WebService 接口编写.这里不在赘 ...
- vue 使用axios 出现跨域请求的两种解决方法
vue 使用axios 出现跨域请求的两种解决方法 参考文章: (1)vue 使用axios 出现跨域请求的两种解决方法 (2)https://www.cnblogs.com/wangshengli5 ...
- 实现百度下拉菜单实例(利用jsonp跨域请求百度数据接口)
JSONP:是JSON with padding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指 ...
- ajax请求头cookies中传递sid,跨域请求单点登录,登录成功,但是在controller中获取的cookie与浏览器中不一致,请大神指点一二。^_^...
跨域请求js代码: $.ajax({ type:"post", async:false, contentType : "application/x-www-form-ur ...
- html中jsonp错误,解决jquery中jsonp格式跨域请求报parsererror的错误
在vs中创建一个空的mvc项目,在Controllers文件夹中添加一个控制器CommonController,并在该控制器下添加一个action用于获取服务器时间,代码如下: public Acti ...
- vue-cli4.x 中 配置允许跨域请求
在项目根目录下创建vue.config.js文件: vue.config.js: module.exports = {devServer: {host: 'localhost',port: 8080, ...
- 苹果ajax跨域,vue中解决axios跨域问题【ajax在vue中的应用】
兴冲冲的开始用vue封装组件.自定义指令之后,开始实战.诶,等等,貌似少了--ajax交互? 好吧大致研究了一下axios,但是存在以下两个问题: 1.跨域问题 2.数据格式问题 跨域信息示例: Fa ...
- 跨域请求的API接口
跨域 搜索引擎接口 1.谷歌(Google) http://suggestqueries.google.com/complete/search?client=youtube&q=#conten ...
- vue --- 使用字符串'api'跨域请求资源
vue环境下,修改config/index.js文件 module.exports = {data: {proxyTable: {'/api': {target: 'http://siwei.me', ...
最新文章
- More than one file was found with OS independent path 'META-INF/rxjava.properties
- KDE发布四月份更新(4.6.2),与GNOME同祝
- C#开启线程的四种方式
- 存储过程实现无限级分类(3)
- eclipse 界面设置与字体更改
- 宿主机挂载虚拟机磁盘文件guestmount
- antd tree搜索并定位_KD-Tree原理详解
- Spring MVC之基于java config无xml配置的web应用构建
- matlab矩阵(一)--如何控制矩阵中小数点的位数
- 如何在 Mac 上设置 iCloud 功能?
- oracle 10g 高级复制,Oracle9i和Oracle10g之间构建高级复制环境的测试用例
- bubblesort java,算法bubbleSort()
- 视频教程-2020软考数据库系统工程师-基础知识培训视频-软考
- java 实现ukey身份认证_一种基于ukey认证的单点登录实现方法与流程
- 华为交换机配置时区_华为交换机设置时间问题
- Microchip Studio 7 程序的烧录操作
- 通配符SSL证书购买建议
- 儒略历--Java代码(附带发现了一些问题)
- 医疗保健研究报告-生物大数据的时代(附下载)
- 蓝桥 贪吃的大嘴(Java)
热门文章
- 网易邮箱显示服务器返回错误,企业退信的常见问题?
- 如何免费获取基于公网 IP 的 SSL 证书 (无需域名)
- 联通光猫IPV6配置
- Java SSL HTTPS进行双重认证开发实践
- 计算机屏幕显示不全怎么办,电脑打开软件后屏幕显示不全怎么办
- getBytes方法
- html怎么给文字添加视频链接,视频加文字水印,视频加图片水印,视频加外部链接,一个软件全部搞定...
- Excel如何取消合并单元格并填充空单元格
- python:实现convolve卷积算法(附完整源码)
- Linux环境下安装Tableau Server