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

相关推荐
前端小趴菜0521 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴5 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts