北京网站建立,优化关键词方法,全自动精准引流软件,济南网站建设价格1.Vue脚手架配置代理
2.vue-resource
一.Vue脚手架配置代理
1.1 使用Ajax库 -- axios
① 安装 : npm i axios
② 引入: import axios from axios
③ 使用示例 1.2 解决开发环境Ajax跨域问题
跨域#xff1a;违背了同源策略#xff0c;同源策略规定协议名#xff0…1.Vue脚手架配置代理
2.vue-resource
一.Vue脚手架配置代理
1.1 使用Ajax库 -- axios
① 安装 : npm i axios
② 引入: import axios from axios
③ 使用示例 1.2 解决开发环境Ajax跨域问题
跨域违背了同源策略同源策略规定协议名主机名端口号必须一致
解决方法配置代理服务器
两种方式
方式①
1) 在 Vue.config.js 中添加如下配置转发的服务器
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 devServer: {proxy: {/atguigu: {target: http://localhost:5000,pathRewrite: { ^/atguigu: },ws: true, // 用于支持webSocketchangeOrigin: 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
