1)使用 AjaxPlugin 插件(在组件里使用)

引入插件

import { AjaxPlugin } from 'vux'

初始化

export default {
components: {
AjaxPlugin
},
data () {
return {
}
}
}

封闭一个方法方便调用(正式使用时,你应该还需要计算签名之类的操作)

function htttpRequest (url, params, cb) {
let dataStr = ''
for (let key in params) {
dataStr += key + '=' + params[key]
}
dataStr = dataStr.substr(0, dataStr.length - 1) AjaxPlugin.$http.post(url, dataStr)
.then((response) => {
if (cb) cb(response.data)
})
}

使用示例

export default {
components: {
AjaxPlugin
},
data () {
return {
articleList: this.getArticleList(1)
}
},
methods: {
getArticleList: function (catId) {
let _this = this htttpRequest('/api', {method: 'article.getList', 'catId': catId}, function (data) {
_this.articleList = data.Result.ArticleList
})
return []
}
}
}

这里示例写的是初始化时,默认调用一次,你可以在相应的按钮上点击事件再调用此函数

2)关于跨域(用nodejs代理转发请求)

如果你有注意,应该会发现,上面请求写的 url 是 '/api' ,这不是一条确切的接口地址,假设你的域名为 http://localhost:8080,那么它请求的地址即为 http://localhost:8080/api

这个 /api 默认是不存在的,现在我们配置一下 nodejs ,让它为我们转发请求

假设,我需要请求的接口的入口为 http://www.xxx.com/api

修改 /config/index.js 配置文件,修改 dev 选项下 proxyTable 的值为如下

proxyTable: {
'/api': {
target: 'http://www.xxx.com/',
changeOrigin: true
}
},

PS:这里使用的是一个叫 http-proxy-middleware 的 nodejs 中间件,系统已默认为我们集成,直接配置就好了

上面的配置的意思是:遇到以 '/api'开关的 http 请求,自动转化到 target (目标)url 地址去,实际请求地址就是 target + '/api'

需要注意的是,假设,你需要请求的接口的入口为 http://www.xxx.com/rest,而代码里请求的 url 写的是 '/api',则你需要使用 pathRewrite 来进行路径重写,而不是直接改 traget

proxyTable: {
'/api': {
target: 'http://www.xxx.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '/rest'
}
}
},

下面是一个错误示范

proxyTable: {
'/api': {
target: 'http://www.xxx.com/rest',
changeOrigin: true
}
},

这里实际请求的地址为:http://www.xxx.com/rest/api,很明显是错误的(当然,你也可以使用 pathRewrite 把 '/api' 改成 '',也是可以的)


vux ajax请求 及 跨域的更多相关文章

  1. ajax请求ashx跨域问题解决办法

    ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng  ...

  2. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  3. 解决ajax请求cors跨域问题

    ”已阻止跨源请求:同源策略禁止读取位于 ***** 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin').“ ”已阻止跨源请求:同源策略禁止读取位于 ** ...

  4. Ajax请求,跨域小坑

    今天在上班的时候,被坐在旁边项目经理叫过去问了一个Ajax请求跨域的问题,一开始没理解清楚也还有对这个没有理解的透,后面被打击的要死. 当时的需求是需要测试一个已发布的api接口,需要在本地写测试程序 ...

  5. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. SpringMVC处理ajax请求的跨域问题和注意事项

    .首先要知道ajax请求的核心是JavaScrip对象和XmlHttpRequest,而浏览器请求的核心是浏览器我的个人博客(基于SSM,Redis,Tomcat集群的后台架构) github:htt ...

  7. jQuery解决ajax请求的跨域问题

    这两天工作中频繁的遇到JS的跨域问题,都通过绕开ajax请求的方式.特地百度了一下,把跨域问题解决了.在这分析一下 首先贴上js的页面代码: <html> <head> < ...

  8. Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

    1.创建Api项目 我用的是VS2019 Core3.1 .打开Vs2019 创建Asp.Net Core Web应用程序命名CoreWebApi 创建选择API 在Controller文件夹下面添加 ...

  9. Ajax请求WebService跨域问题 [转载]

    1.背景 用Jquery中Ajax方式在asp.net开发环境中WebService接口的调用 2.出现的问题 原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容 ...

随机推荐

  1. Spring配置文件<context:property-placeholder>标签使用漫谈

    <context:property-placeholder>标签提供了一种优雅的外在化参数配置的方式,不过该标签在Spring配置文件中只能存在一份!!! 众所周知,Spring容器是采用 ...

  2. 微信小程序——星星评分

    先来个效果图镇楼: 实现原理: 1.循环需要评分的列表,判断它的分数 与 当前星星索引的大小: 2.点击,获取星星对应的分数,让星星高亮. 代码: star.wxml: <view class= ...

  3. applicationContext.xml报错org.springframework.orm.hibernate3.LocalSessionFactoryBean not found

    applicationContext.xml报错org.springframework.orm.hibernate3.LocalSessionFactoryBean not found 解决办法: 1 ...

  4. burn android images with fastboot

    在qualcomm平台,使用fastboot烧写系统镜像.烧写方法记录于此. Burn emmc_appsboot.mbn adb reboot bootloader # 重启到bootloader ...

  5. logbook日志系统

    python中替代logging的日志系统. 不过比之前的logging难理解. 先上打印到屏幕上的代码和存到日志文件中的代码: #!/usr/bin/env python3 # -*- coding ...

  6. CI框架 -- 配置文件config.php

    application/config/config.php 文件 $config['base_url'] = "http://www.baidu.com/". 您网站的网址,Cod ...

  7. 解决ubuntu上网慢的方法

    在ubuntu下用firefox等浏览器上网,往往比在windows下上网要慢好多,但细心的人会发现,慢的时间是花在DNS查找上面了.那么 我们可以在本机缓存DNS,也就是在本机架设一个DNS代理服务 ...

  8. SecureCRT连接linux,vim颜色显示问题

    为什么使用VIM?由于具有颜色显示的功能.而且还支持很多程序语法.VIM能够帮助你直接进行程序除错.可是在SecureCRT连接Linux后显示就是黑白,感觉非常不爽! ! 怎么办? vim编敲代码也 ...

  9. 8.1 shell介绍 8.2 命令历史 8.3 命令补全和别名 8.4 通配符 8.5 输入输出重定向 

    8.1 shell介绍 8.2 命令历史 8.3 命令补全和别名 8.4 通配符 8.5 输入输出重定向 什么是shell? shell是一个命令解释器,提供用户和及其之间的交互 致辞特定语法,比如逻 ...

  10. 基于struts2的ajaxfileupload异步上传插件的使用

    服务器端采用struts2来处理文件上传. 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1 ...