配置代理
一、Vue脚手架配置代理
可以配制出一个代理服务器,用于解决跨域问题。
代理服务器的端口号和Vue端口号相同,所以访问代理服务器时不存在跨域问题。
方法一:
在vue.config.js中添加配置:
devServer: {
proxy:'http://localhost:5000'
}
页面中本来请求5000端口服务器的url改为请求8080代理服务器(vue端口号是8080,代理服务器端口号和vue端口号相同):
// 原本要请求localhost:5000/students,现在发给代理服务器localhost:8080
axios.get('http://localhost:8080/students').then(
response => {
console.log('请求成功了', response.data)
},
error => {
console.log('请求失败了', error.message)
}
)
优点:配置简单,请求资源时直接发送给前端8080端口即可
缺点:不能配置多个代理,不能灵活的控制请求是否走代理
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器。优先匹配项目中已有的资源,例如http://localhost:8080/favicon.ico
获取到的是本地的文件,而不会转发给服务器。
方法二:
在vue.config.js中添加配置:
devServer: {
proxy: {
'/test': { // 请求前缀
target: 'http://localhost:5000',
pathRewrite: {'^/test': ''}, // 请求服务器时去掉/test前缀
ws: true, // 用于支持WebSocket,默认true
changeOrigin: true // 用于控制请求头的host值,默认true
},
'/demo': {
target: 'http://localhost:5001',
pathRewrite: {'^/demo': ''},
ws: true,
changeOrigin: true
},
}
}
页面中请求路径需要加上指定的前缀:
// 请求localhost:8080/test 会被转发给localhost:5000
axios.get('http://localhost:8080/test/students').then(
response => {
console.log('请求成功了', response.data)
},
error => {
console.log('请求失败了', error.message)
}
)
相关参数:
pathRewrite
:修改请求资源路径。
默认情况下,请求的资源路径会被直接转发给服务器,例如
http://localhost:8080/test/students
会被转发成http://localhost:5000/test/students
。如果要去掉前缀test
,需要在pathRewrite
中使用正则表达式替换掉。
ws
:用于支持WebSocket,默认truechangeOrigin
:用于控制请求头的host,默认true
当
changeOrigin
为false时,代理服务器发给服务端的请求来源host为代理服务器真实的host,服务端接收到的请求来源的host为:localhost:8080当
changeOrigin
为true时,代理服务器会“欺骗”服务端,用服务端的host当做请求来源host,服务端接收到的请求来源的host为:localhost:5000一般情况下,将该项设置为true(默认值)。防止服务端加了请求来源必须为同源的限制
优点:可以配置多个代理,且可以灵活的控制请求是否走代理
缺点:配置略微繁琐,请求资源时必须加前缀
二、常用的ajax技术对比
常用的ajax技术:
- xhr(XMLHttpRequest):原生window自带的对象,可以直接使用。但是用法繁琐,很少使用
- Jquery:可以使用 . g e t 、 .get、 .get、.post进行ajax操作,但Jquery中大部分工作是便于操作DOM,而Vue中要尽量避免DOM操作,所以VUE中不推荐使用Jquery
- axios:封装的promise风格的ajax请求,需要引入axios库。最常用。
- fetch:也可以使用promise风格的ajax请求。fetch是js内置的,不依赖xhr。但是fetch会将返回的数据包装两层promise,而且不兼容IE浏览器。
- vue-resource:vue的插件,用法和axios完全一样,但是很久没有维护了,在vue1.0时代用的较多
axios的使用:
- 安装axios
npm i axios
- 引入并使用
import axios from 'axios'
axios.get('http://localhost:8080/students').then(
response => {
console.log('请求成功了', response.data) // 响应数据存在response的data属性中
},
error => {
console.log('请求失败了', error.message) // 错误信息存在error的message属性中
}
)
vue-resource的使用:
- 安装vue-resource
npm i vue-resource
- 在main.js中应用插件
import vueResource from 'vue-resource'
// 使用该插件后,vm和vc对象都会多出来一个$http属性
Vue.use(vueResource)
- 使用vue-resource发送请求
// 使用vue-resource插件后,vm和vc会多出来$http属性
// 使用$http发送请求和使用axios发送请求的写法一模一样
this.$http.get('http://localhost:8080/students').then(
response => {
console.log('请求成功了', response.data)
},
error => {
console.log('请求失败了', error.message)
}
)
三、常用解决跨域的方法
常用的解决跨越的方法:
-
cors:不需要前端做任何操作。需要在后台代码中,将响应头添加几个特殊响应头
-
jsonp:巧妙的借助了
<script>
标签的src
属性在引入外部资源时不受同源策略限制的特点办到的。只能解决get请求的跨域问题,而且需要前端、后台都配合进行改造。不常用。 -
配置代理服务器
先赞后看,养成习惯!!!^ _ ^ ❤️ ❤️ ❤️
码字不易,大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦!