Vue 配置代理 完整 axios

一、配置文件

vue.config.js

  devServer: {
    proxy: {
      '/api': {
        // 获取数据的接口
        target: 'http://127.0.0.1:8000',
        // 特别重要 
        pathRewrite:{'^/api':''},
        ws: true,
        changeOrigin: true
      },
    }
  }

二、请求数据

1、下载axios

npm install axios

2、引入

import axios from 'axios';

3、异步(注意端口后面直接加代理)

methods: {
    getCars(){
        axios.get('http://localhost:8080/api/cars/').then(
            response=>{
                console.log(response.data)
            },
            error=>{
                console.log(error.message)
            }
        )
    }
},

三、多个代理，注意pahtRewrite

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}