new XMLHttpRequest()
(最原始写法) xhr.open() xhr.send()$get $post
在Vue中推荐使用axios
发送请求。
npm i axios
import axios from 'axios'
axios.get('http://localhost:5000/students').then(
response => {
console.log("响应体内容", response.data)
},
error => {
console.log("请求失败", error.message)
}
)
同源请求是指协议名、主机名、端口号
三者一样
跨域请求就是是指协议名、主机名、端口号
三者有任何一个不一样都是跨域请求。
而且跨域请求是请求发出去了,浏览器接收并返回了结果,只是浏览器没有接收响应结果。
我们js的跨域解决有两种办法:jsonp 和 CORS
jsonp 靠 来实现跨域请求
前端需要定义函数,而且后端需要调用该函数
jsonp只能解决GET
请求跨域,所以jsonp请求很少用
CORS通过设置响应头来实现跨域请求,由后端人员
添加响应头
浏览器一看到后端携带的响应头就不拦截数据了,就可以实现跨域请求。
造成的问题是任何人都可以向该后端要数据,是不安全的
原理:
设置一个代理服务器,它的协议名、主机名、端口号
和前端的一模一样,这样前端访问该代理服务器就没有跨域问题
了。
当该代理服务器收到前端的请求,再向其他服务器发送该请求
,获取数据,之后将数据返回给前端。
(服务器之间不是通过ajax请求发送信息自然也没有跨域这个问题了)
有两种方法:
这里使用vuecli 配置代理服务器
vue.config.js
:用来设置脚手架的全局配置。vue.config.js
做如下配置:module.exports = {
devServer: {
// 这里配置的是向哪台服务器发送请求
// (代理服务器的地址不用管他会自动配置)
proxy: '协议名://主机名:端口号'
}
}
http://localhost:8080
http://localhost:5000/students
请求数据,出现跨域问题。vue.config.js
配置:
module.exports = {
devServer: {
// 这里配置的是向哪台服务器发送请求
// (代理服务器的地址不用管他会自动配置)
proxy: 'http://localhost:5000'
}
}
请求发送:
axios.get('http://localhost:8080/students').then(
response => {
console.log("响应体内容", response.data)
},
error => {
console.log("请求失败", error.message)
}
需要注意的一个问题:服务器的具体请求路径 /students
不能直接在vue.config.js
中直接写,还是写在ajax请求地址后面,此时ajax请求地址需要换成http://localhost:8080
.
vue.config.js
的第二种配置方式:
eg:
vue.config.js
配置
devServer: {
proxy: {
'/api': {// '/api'请求前缀,表示只要请求前缀是/api就走代理
target: '' ,
// 将以api开头的请求,将开头的/api去掉,否则目标服务器会找不到路径的
pathRewrite: { '^/api': '' },
ws: true,//用于支持webscoket
//用与向目标服务器说明自己是哪台服务器(即配置请求头host)
// 如果为false则自己是哪台服务器就说是哪台(host为8080)
// 如果为true,则目标服务器是哪台就说自己是哪台服务器(host为5000)
changeOrigin:true
},
// 可以设置多台服务器
'/demo': {
target: '' ,
pathRewrite: { '^/demo': '' },
ws: true,
changeOrigin:true
}
}
}
请求发送:
axios.get('http://localhost:8080/api/students').then(
response => {
console.log("响应体内容", response.data)
},
error => {
console.log("请求失败", error.message)
}
实现效果:
代码获取:
https://github.com/wangliyang-max/qiandaun/tree/master/VUE/vue_test/20_src_github%E6%90%9C%E7%B4%A2%E6%A1%88%E4%BE%8B
vue-resource是vue的插件库,是对xhr的封装。
npm i vue-resource
import vueResource from 'vue-resource'
vue.app()
进行配置:Vue.use(vueResource)
$http
对象属性。axios
换成this.$http
this.$http.get(`https://api.github.com/search/users?q=${this.keyword}`)
.then(response => {
// console.log("请求成功了", response.data.items)
this.$bus.$emit("getUsers", { isLoading: false, errMsg: '', users: response.data.items })
},
error => {
// console.log("请求失败了", error.message)
this.$bus.$emit("getUsers", { isLoading: false, errMsg: error.message, users:[]})
}
)
最常用的发送ajax请求的方法还是axios