VUE学习(十八)、VUE脚手架配置代理

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值
            }
        }
    }
};

推荐阅读

VUE笔记文章列表_醉瑾_的博客-CSDN博客