1. 代理服务器
在前端开发中,我们经常使用cors
和jsonp
解决跨域问题。在Vue中,除了使用前两种方法外,我们可以借助代理服务器解决该问题。如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。
方法一
在vue.config.js
中添加如下配置:
devServer:{
// 这里的5000为服务器的端口号
proxy:"http://localhost:5000"
}
注意
:
优点
:配置简单,请求资源时直接发给前端(8080)即可。缺点
:不能配置多个代理,不能灵活的控制请求是否走代理。工作方式
:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
方法二
如果你想要更多的代理控制行为,也可以在vue.config.js
中使用配置 path: options
。
module.exports = {
devServer: {
proxy: {
'/api': {// 匹配所有以 '/api'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api': ''}
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
ws默认为true,用于支持websocket
*/
注意
:
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
- 缺点:配置略微繁琐,请求资源时必须加前缀。
2. axios
1.在终端执行命令npm i axios
下载第三方库
2.在第二种配置代理服务器下,可以发起如下请求:
<template>
<div>
<button @click="getStudents">获取学生信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'App',
methods: {
getStudents(){
axios.get('http://localhost:8080/api/students').then(
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
}
},
}
</script>
当我们按下按钮后,控制台可以获得响应信息。