Vue2 第十七节 Vue中的Ajax

1.Vue脚手架配置代理

2.vue-resource

一.Vue脚手架配置代理

1.1 使用Ajax库 -- axios

① 安装 : npm i axios

② 引入: import axios from 'axios'

③ 使用示例

1.2 解决开发环境Ajax跨域问题

跨域:违背了同源策略,同源策略规定协议名,主机名,端口号必须一致

解决方法:配置代理服务器

两种方式

方式① :

(1) 在 Vue.config.js 中添加如下配置转发的服务器

javascript 复制代码
devServer: {
   proxy: 'http://localhost:5000'
}

(2) 重新启动脚手架

(3) 请求的地方写8080

(4)说明:

  • 优点:配置简单,请求资源时直接发给前端8080即可
  • 缺点:不能配置多个代理,无法灵活控制请求是否走代理
  • 工作方式:如果本地存在就会直接从本地拿,不会去请求代理服务器

方式 ②

(1)配置

  • '/atguigu':请求前缀,如果有请求前置,就走代理,如果没有,就不走代理,做到了灵活控制

  • 在请求的时候,前缀是放到端口号后面的

  • pathRewrite:匹配路径,把atguigu的字符串变成空字符串,转发到服务器那边就是正确的路径

  • changeOrigin为true时,服务器收到的host为 localhost:5000

  • changeOrigin 为false时, 服务器收到的host为 localhost:8080

  • changeOrigin 默认值为true

javascript 复制代码
 devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',
        pathRewrite: { '^/atguigu': '' },
        ws: true,  // 用于支持webSocket
        changeOrigin: true  // 用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
        pathRewrite: { '^/demo': '' },
        // ws: true,  // 用于支持webSocket
        // changeOrigin: true  // 用于控制请求头中的host值
      }
    }
  }

(2) 说明

  • 优点:可以配置多个代理,且可以灵活的控制请求是否走代理
  • 缺点:配置略微繁琐,请求资源时必须加前缀

二. vue-resource(了解)

vue插件库,vue1.x使用广泛,官方已不维护

① 安装:npm i vue-resource

② 引入:import vueResource from 'vue-resource'

③ 使用:Vue.use(vueResource)

使用:this.$http.get

相关推荐
工业互联网专业1 分钟前
基于springboot+vue的动漫交流与推荐平台
java·vue.js·spring boot·毕业设计·源码·课程设计·动漫交流与推荐平台
树上有只程序猿1 分钟前
Java程序员需要掌握的技术
前端
从零开始学安卓4 分钟前
Kotlin(三) 协程
前端
try again!7 分钟前
rollup.js 和 webpack
开发语言·javascript·webpack
阿镇吃橙子8 分钟前
一些手写及业务场景处理问题汇总
前端·算法·面试
庸俗今天不摸鱼8 分钟前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化
逆袭的小黄鸭9 分钟前
JavaScript:作用域与作用域链的底层逻辑
前端·javascript·面试
用户26124583401619 分钟前
vue2实现滚动条自动滚动
前端
FanetheDivine13 分钟前
实现"选中表格项将元素加入集合"的动画效果
javascript·vue.js