Vue 配置代理 简洁

一、修改配置文件

通过 vue.config.js 中的 devServer.proxy 配置代理

// 配置代理 proxy 指向后端API服务器
devServer: {
    proxy: 'http://127.0.0.1:8000'
}

二、使用axios

1、下载

npm install axios

2、引入

import axios from 'axios'

3、使用

methods: {
    getStudentInfo(){
        // url  由http://127.0.0.1:8000/student -> http://localhost:8080/student, 由于设置代理
        axios.get('http://localhost:8080/student').then(
            response=>{
                console.log('请求成功', response.data)
            },
            error=>{
                console.log('请求失败', error.message)
            }
        )
    }
},

4、重点

前端请求(get)后端遇到跨域问题，设置一个代理，该代理指向后端，该代理获取数据，前端直接向该代理请求数据即可，该代理与前端端口一致