前端基础之ajax
前端基础之ajax
vue-cli 配置代理服务器解决跨域问题
我们可以使用一个代理服务器8080，Vue项目8080发送请求向代理服务器8080发送请求，再由在理服务器转发给后端服务器
首先需要在vue.config.js中配置代理服务器
const
{
defineConfig
} =
require
(
‘@vue/cli-service’
)
module
.
exports
=
defineConfig
({
transpileDependencies:
true
,
lintOnSave:
false
,
//
开启代理服务器
devServer:
{
proxy:
‘http://localhost:5000’
}
})
然后将发送请求的axios路径改为代理服务器也就是改为8080
<
template
<
div
<
button
@
click
="
getStudents
"
获取学生消息
</
button
</
div
</
template
<
script
import
axios
from
‘axios’
;
export default
{
name:
‘App’
,
methods:
{
getStudents
(){
axios
.
get
(
‘http://localhost:8080/students’
).
then
(
response
=>
{
console
.
log
(
'
请求发送成功了
'
,
response
.
data
)
},
error
=>
{
console
.
log
(
'
请求失败了
'
,
error
.
message
)
}
)
}
}
}
</
script
成功接收数据
多个代理配置
如果我们需要接收多个服务器传输的数据，就需要配置不止一个代理
在vue.config.js中
const
{
defineConfig
} =
require
(
‘@vue/cli-service’
)
module
.
exports
=
defineConfig
({
transpileDependencies:
true
,
lintOnSave:
false
,
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
}
}
}
})
进行发送请求
<
template
<
div
<
button
@
click
="
getStudents
"
获取学生消息
</
button
<
button
@
click
="
getCars
"
获取汽车消息
</
button
</
div
</
template
<
script
import
axios
from
‘axios’
;
export default
{
name:
‘App’
,
methods: {
getStudents (){
axios . get ( ‘http://localhost:8080/atguigu/students’ ). then (
response => {
console . log ( ’ 请求发送成功了 ’ , response . data )
},
error => {
console . log ( ’ 请求失败了 ’ , error . message )
}
)
},
getCars (){
axios . get ( ‘http://localhost:8080/demo/cars’ ). then (
response => {
console . log ( ’ 请求发送成功了 ’ , response . data )
},
error => {
console . log ( ’ 请求失败了 ’ , error . message )
}
)
}
}
}
</
script