## 一、概述 前后端分離調試的時候，通過配置，解決跨域訪問問題，部署的時候，可以通過合并前后端（不存在跨域）或分離部署（nginx的跨域設定）來解決； ## 二、方案 如后端的訪問接口url形式為： ``` http://localhost:8090/staff/list ```  前端調用api的方式： ``` //定義代碼 import axios from 'axios' Vue.prototype.$axios = axios //使用代碼 this.$axios.get('/api/staff/list',?params).then(res\=>?{ ``` ## 三、配置 ``` proxyTable: { '/api': { target: 'http://localhost:8090', changeOrigin: true, pathRewrite: { '^/api': '/' } } }, ``` 或 ``` devServer: { // development server port 8000 port: 8000, // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11 proxy: { '/api': { target: 'http://localhost:80', ws: false, changeOrigin: true } } }, ``` ``` //調用get請求 this.$axios.get('/api/staff/list', params).then(res => { this.pageLoading = false if (!res.data || !res.data.rows) return //總數賦值 this.total = res.data.total this.page++; //頁面元素賦值 this.rows = res.data.rows }).catch(e =>{ this.pageLoading = false } ) ``` > 需要注意的是，get/post要與后臺的get和post模式匹配起來；