VUE学习(十八)、VUE脚手架配置代理
前提是后端已存在
一、App.vue
<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/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>
二、配置代理服务器解决跨域问题(vue.config.js)
module.exports = {
pages: {
index: {
//入口
entry: "src/main.js"
}
},
lintOnSave: false, //关闭语法检查
/*
当你请求的资源代理服务器本身就有,那么代理服务器就不会去找
真正的服务器请求资源
*/
//开启代理服务器(方式一)
/*
devServer: {
proxy: 'http://localhost:5000'
},
*/
//开启代理服务器(方式二)
devServer: {
proxy: {
"/zuijin": {
target: "http://localhost:5000",
pathRewrite: { "^/zuijin": "" } // 重写路径(去掉zuijin,不然请求路径就变为http://localhost:8080/zuijin/students
// ws: true, //用于支持websocket
// changeOrigin: true //用于控制请求头中的host值(是否实行欺骗)
},
"/demo": {
target: "http://localhost:5001",
pathRewrite: { "^/demo": "" }
// ws: true, //用于支持websocket
// changeOrigin: true //用于控制请求头中的host值
}
}
}
};