前端基础之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>