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

相关推荐
天天进步20152 分钟前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz13 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇18 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒22 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员38 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐40 分钟前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript