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的数据请求方式及跨域的更多相关文章

  1. Vue使用Axios实现http请求以及解决跨域问题

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...

  2. axios发送自定义请求头的跨域解决

    前端发送来的axios请求信息 this.$axios.request({  url:'http://127.0.0.1:8001/pay/shoppingcar/',  method:'post', ...

  3. 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题

    [手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...

  4. vue 解决axios请求出现前端跨域问题

    vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...

  5. vue2-通过axios实现数据请求

    1.通过axios实现数据请求 vue.js默认没有提供ajax功能 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascr ...

  6. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  7. jQuery异步请求(如getJSON)跨域解决方案

    相信大家在使用jQuery异步请求非自己网站内相对资源(通过别人站点上的URL直接读取)使经常会遇到如下错误吧,实际上这些错误都是浏览器安全机制“搞的鬼”,才让我们开发路上遇到了拦路虎. 当你直接在浏 ...

  8. SpringBoot入门教程(十三)CORS方式实现跨域

    什么是跨域?浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 跨域资源访问是经常会遇到的场景,当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资 ...

  9. 客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法

    客户端为了实现token认证,通过Jquery的ajaxSetup方法全局配置headers: 全局配置headers后会导致部分不需要token认证的请求变为options请求,导致跨域访问.报错信 ...

随机推荐

  1. JavaScript里面9种数组遍历!

    ​大家好,我在这里总结分享了JavaScript中的闹腾的数组循环家族. 1.大家最常用的for循环,我就不解释了: for(let i = 0; i < 5 ; i++){ console.l ...

  2. jQuery效果--淡入和淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  3. python3 调用zabbix API实现批量增加删除主机,主机各种监控项------实战

    在以前的博客中谈到了利用zabbix接口来对主机进行批量的增删改查 这里在不用环境中实战遇到了不同问题,这里记录下来以便后续review 以下为实战中获取token的代码,在zabbix标准接口文档中 ...

  4. shell脚本if判断语句报错[: too many arguments的两种原因

    shell脚本,if判断语句报错[: too many arguments 我遇到过两种情况: 1.第一中情况就是网上大家说的,字符串变量中可能存在空格,shell解析时将其认为是多个参数,再进行判断 ...

  5. MySQL查询一张表有多少个字段

    SQL如下 select count(*) from information_schema.COLUMNS where TABLE_SCHEMA='数据库名' and table_name='表名'

  6. 12、Nginx代理缓存服务

    通常情况下缓存是用来减少后端压力, 将压力尽可能的往前推, 减少后端压力,提高网站并发延时 1.缓存常见类型 服务端缓存 代理缓存, 获取服务端内容进行缓存 客户端浏览器缓存 Nginx代理缓存原理 ...

  7. 关于windows下无法删除文件,需要TrueInstaller权限的问题

    笔者办公室的笔记本今天突然弹出来一个ie浏览器,这不是为了下载其他浏览器而存在的浏览器吗?现在还臭不要脸的弹出来,然鹅我在删除文件夹的时候,提示我无法删除,必须要有TrueInstaller的权限,那 ...

  8. C与汇编混合编程

    C中调用汇编,要把汇编定义为全局的,加.global C内嵌汇编 __asm__( :汇编语句部分 :输出部分 :输入部分 :破坏描述部分 ); 用C内嵌汇编的方式:实现LED的点亮 //#defin ...

  9. Python核心技术与实战——二十|Python的垃圾回收机制

    今天要讲的是Python的垃圾回收机制 众所周知,我们现在的计算机都是图灵架构.图灵架构的本质,就是一条无限长的纸带,对应着我们的存储器.随着寄存器.异失性存储器(内存)和永久性存储器(硬盘)的出现, ...

  10. VCL界面控件DevExpress VCL Controls v19.1.3全新来袭

    DevExpress VCL Controls是 Devexpress公司旗下最老牌的用户界面套包.所包含的控件有:数据录入,图表,数据分析,导航,布局,网格,日程管理,样式,打印和工作流等,让您快速 ...