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

相关推荐
正在学习前端的---小方同学9 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
毕业设计制作和分享10 小时前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
键盘不能没有CV键12 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ13 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python13 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep14 小时前
【前端】前端运行环境的结构
前端
你的人类朋友14 小时前
【Node】认识multer库
前端·javascript·后端
Aitter14 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front15 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'15 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css