axios的数据请求方式及跨域
express 的三大功能:静态资源、路由、模板引擎
app.use(express.static('www')); 只要是创建这个静态的目录,这个 www 的静态目录里面的文件就可以被访问
数据的请求方式 axios
get 的 请求方式
axios.get('url地址').then(function(success){ // 请求成功的回调函数
console.log(success)
}).catch(function(error){ // 请求失败的回调函数
console.log(error)
})
post 的方式请求则与 get 的方式类似
在 vue-cli 中,使用 axios 时,遇到跨域问题怎么办? 使用 proxyTable 服务代理来进行处理
我们可以在 config 的文件中的 index.js 的配置文件中
代码如下 vue-cli2 中的写法
module.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable:{
'/api':{
target:'http://localhost:3000/', // 当你要请求什么地址,这里改成什么地址即可
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
}
}
}
vue-cli3 中跨域的写法,要在根目录下面创建 vue.config.js 文件
module.exports = {
publicPath: '/',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8088/',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
在 vue-cli3 中 我们需要通过 vue.config.js 文件来写以上代码,之后重启服务器即可
然后我们在使用 axios 的时候,处理跨域的写法
这样我们便可以拿到后台的数据了
还有,当我们通过 axios 来拿到后台的数据,我们在组件中的书写位置,以及在页面中的表现形式
我们的请求数据是在 created(){} 中完成的 当我们在 created 中完成 axios 的请求操作,我们还需要在 data 中 定义一个变量 去 等于我们的 请求到的数据
之后,我们就可以在页面中去使用 data 的变量了,这个变量就是我们请求到的数据了,但是注意:如果我们需要操作请求到的数据,我们只能在 updated(){}
函数中完成,一定不允许在 mounted(){} 函数中 完成 操作,
原因:
ajax 是异步操作,而生命周期是同步操作,也就是说,我们请求完数据,说不定生命周期的一系列操作都都完了,其中包括了 mounted(){} 函数
但是,我们在请求完数据后,一定会使用 data 对象中的属性 = 我们请求到的数据,来方便我们的操作,这就是一个数据改变的过程,所以,vue
就会执行 beforeUpdate(){} 及 updated(){} 的函数,所以,我们在请求完数据后,还需要进行操作,就在 updated(){} 中来完成吧
nodejs 中的页面的重定向
这里的 Location 是设置的前端的路由,后端返回的东西,是没有跨域的限制的,并且需要 res.end()
否则,前端的页面没有响应,(301,302 都可以)
axios的数据请求方式及跨域的更多相关文章
- Vue使用Axios实现http请求以及解决跨域问题
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...
- axios发送自定义请求头的跨域解决
前端发送来的axios请求信息 this.$axios.request({ url:'http://127.0.0.1:8001/pay/shoppingcar/', method:'post', ...
- 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题
[手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...
- vue 解决axios请求出现前端跨域问题
vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...
- vue2-通过axios实现数据请求
1.通过axios实现数据请求 vue.js默认没有提供ajax功能 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascr ...
- AngularJS中get请求URL出现跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...
- jQuery异步请求(如getJSON)跨域解决方案
相信大家在使用jQuery异步请求非自己网站内相对资源(通过别人站点上的URL直接读取)使经常会遇到如下错误吧,实际上这些错误都是浏览器安全机制“搞的鬼”,才让我们开发路上遇到了拦路虎. 当你直接在浏 ...
- SpringBoot入门教程(十三)CORS方式实现跨域
什么是跨域?浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 跨域资源访问是经常会遇到的场景,当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资 ...
- 客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法
客户端为了实现token认证,通过Jquery的ajaxSetup方法全局配置headers: 全局配置headers后会导致部分不需要token认证的请求变为options请求,导致跨域访问.报错信 ...
随机推荐
- 【Activiti】为每一个流程绑定相应的业务对象的2种方法
方式1: 在保存每一个流程实例时,设置多个流程变量,通过多个流程变量的组合来过滤筛选符合该组合条件的流程实例,以后在需要查询对应业务对象所对应的流程实例时,只需查询包含该流程变量的值的流程实例即可. ...
- Date对象中的方法
特殊说明:设置时间的方法,虽然W3C说明传参的范围,在开发过程中,传入的参数不在该范围也是可以的.例如: var t = new Date(), d = t.getDate(); //当天时间往前推2 ...
- N1试卷常考词汇总结
免れる まぬがれる 免去,幸免 軽率 けいそつ 轻率,草率 捩れる ねじれる 拧劲儿,扭歪,弯曲 裂ける さける 裂开,破裂 避ける さける 躲避,避开 つまむ 挟,捏,掐 追及 ついきゅう 追上.追 ...
- 为什么angular library的build不能将assets静态资源打包进去(转)
Versions Angular CLI: 6.0.7 Node: 9.3.0 OS: darwin x64 Angular: 6.0.3 ... animations, common, compil ...
- 一文全面了解NB-IoT技术优势及特点
1.NB-IOT多输入多输出技术 NB-IoT可以利用多天线技术抑制信道传输衰弱,获得分集增益.空间复用增益和阵列增益,在发送端和接收端均采用多天线实现信号同时发送和接收: 因此就形成了一个并行的多空 ...
- Linux禁止root远程登录及修改默认端口
1.1 修改SSHD配置,禁止root远程登录 禁止登录之前先穿甲一个可以远程登录的普通用户,以免造成登录不了的情况 [root@jhkj66 ~]# useradd yw001 #创建用户 [roo ...
- HTML5 App的代码注入攻击
原文链接 摘要 基于HTML5的手机app(译者注:以下简称HTML5 app)越来越流行了, 在大多数情况下它比native应用更容易适配不同的移动操作系统.它开发起来很方便,可以使用标准的web技 ...
- Liunx 用户权限之目录
总结一下: 今天又对liunx权限的认知多了一点,就是关于目录的权限的作用 可以打个比方来形容就是:相当于一个大门 只有目录权限都有的情况下,才能够对目录中的文件进行目录权限操作 例如:drwxrwx ...
- The Preliminary Contest for ICPC Asia Shenyang 2019 C. Dawn-K's water
题目:https://nanti.jisuanke.com/t/41401思路:完全背包 #include<bits/stdc++.h> using namespace std; int ...
- Redis 管道pipeline
Redis是一个cs模式的tcp server,使用和http类似的请求响应协议. 一个client可以通过一个socket连接发起多个请求命令. 每个请求命令发出后client通常会阻塞并等待red ...