如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js
中的 devServer.proxy
选项来配置。
由于 API 接口服务器并没有开启 CORS 跨域资源共享,因此终端会提示如下的错误:Access to XMLHttpRequest at ' https://www.escook.cn/api/users ' from origin ' http://localhost:3000 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'header is present on the requested resource.
① 把 axios 的
请求根路径
设置为
vue 项目的运行地址
(接口请求不再跨域)
② vue 项目发现请求的接口不存在,把请求
转交给 proxy 代理
③ 代理把请求根路径
替换为
devServer.proxy 属性的值,
发起真正的数据请求
④ 代理把请求到的数据,
转发给 axios
方法一
在vue.config.js中添加如下配置:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
/* 1.devServer.proxy 提供的代理功能,仅在开发调试阶段生效
2.项目上线发布时,依旧需要 API 接口服务器开启 CORS 跨域资源共享 */
devServer: {
proxy: 'http://www.yang.top:3006'
}
})
说明:
-
优点:配置简单,请求资源时直接发给前端(8080)即可。
-
缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
-
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
methods: {
// 封装请求图书列表数据
async getBookList () {
const { data: res } = await this.$http.get('/api/getbooks', { params: { id: 1 } })
console.log(res)
},
/* 获取图书列表数据 */
getInfo () {
this.getBookList()
},
/* 获取用户列表的数据 */
async getUser () {
const { data: res } = await this.$http.get('/api/getname', { params: { id: 1 } })
console.log(res)
}
}
方法二
编写vue.config.js配置具体代理规则:
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
*/
说明:
-
优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
-
缺点:配置略微繁琐,请求资源时必须加前缀。
方法二发起请求:
methods: {
getStudents(){
axios.get('http://localhost:8080/api1/students').then(
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
},
getCars(){
axios.get('http://localhost:8080/api2/cars').then(
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
}
},
① devServer.proxy 提供的代理功能,仅在开发调试阶段生效
② 项目上线发布时,依旧需要 API 接口服务器开启 CORS 跨域资源共享