在vue.config.js中添加如下配置
方法一:
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
说明
- 优点:配置简单,请求资源时直接发给前端(8080)即可
- 缺点:不能配置多个代理,不能灵活的控制请求是否走代理
- 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)
方法二:
module.exports = {
devServer: {
proxy: {
'/api': {// 匹配所有以 '/api'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
ws: true,
changeOrigin: true
pathRewrite:{'^/api':''} //重写内容
},
'/foo': {
target: '<other_url>'
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
*/
说明
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理
- 缺点:配置略微繁琐,请求资源时必须加前缀
实现(单个代理)
准备1. 控制台安装所用的axios
执行:npm i axios
导入:import axios from 'axios'
School.vue
<template>
<div>
<button @click="display">请求数据</button>
</div>
</template>
<script>
import axios from 'axios'
export default{
name:'School',
methods:{
display(){
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:"http://localhost:5000"
}
})
配置服务器(demo.js)
准备2:控制台安装所用的express模块
执行:npm install express --save
const express = require('express')
const app=express()
app.use((request,response,next)=>{
console.log('有人请求了服务器');
console.log('请求资源:',request.url);
console.log('请求来自:',request.get('host'));
next()
})
app.get('/students',(request,response)=>{
const students = [
{name:'wzm',age:22},
{name:'lzy',age:19},
{name:'wy',age:21}
]
response.send(students)
})
app.listen(5000,(err)=>{
if(!err)
console.log('服务器启动成功');
})
结果图:
实现(多个代理)
注意点!!!!
School.vue
<template>
......
</template>
<script>
import axios from 'axios'
export default{
name:'School',
methods:{
display(){
axios.get('http://localhost:8080/api/students').then(
//当使用多个配置代理(即方式二),需要在8080后加上 /api,
//(配合 pathRewrite:{'^/api':''}的使用)
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
}
}
}
</script>
拓展:
除axios之外,vue-resource也能实现数据请求
配置相同点:vue.config.js配置相同
配置不同点:需要将School.vue中的axios.get修改成this.$http.get
用法:
插入vue-resource库
npm i vue-resource
main.js文件中加入代码
//引入插件
import vueResource from 'vue-resource'
Vue.use(vueResource)
School.vue中不再导入axios
需要将School.vue中的axios.get修改成this.$http.get