Vue2 第十七节 Vue中的Ajax-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue2 第十七节 Vue中的Ajax。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.Vue脚手架配置代理

2.vue-resource

一.Vue脚手架配置代理

1.1 使用Ajax库 -- axios

① 安装 : npm i axios

② 引入: import axios from 'axios'

③ 使用示例

Vue2 第十七节 Vue中的Ajax,vue.js,前端,javascript

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

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

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

两种方式

方式① ：

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

devServer: {
   proxy: 'http://localhost:5000'
}

(2) 重新启动脚手架

(3) 请求的地方写8080

Vue2 第十七节 Vue中的Ajax,vue.js,前端,javascript

（4）说明：

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

方式 ②

（1）配置

'/atguigu'：请求前缀，如果有请求前置，就走代理，如果没有，就不走代理，做到了灵活控制
在请求的时候，前缀是放到端口号后面的
pathRewrite:匹配路径，把atguigu的字符串变成空字符串，转发到服务器那边就是正确的路径
changeOrigin为true时，服务器收到的host为 localhost:5000
changeOrigin 为false时，服务器收到的host为 localhost:8080
changeOrigin 默认值为true

 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值
      }
    }
  }

Vue2 第十七节 Vue中的Ajax,vue.js,前端,javascript