在前後端分離開發中，需要前端呼叫後端api並進行內容顯示，如果前後端開發都在一臺主機上，則會由於瀏覽器的同源策略限制，出現跨域問題(協議、域名、埠號不同等)，導致不能正常呼叫api介面，給開發帶來不便。
封裝api請求
1 import axios from 'axios'
2
3 //axios.create建立一個axios例項，並對該例項編寫配置，後續所有通過例項傳送的請求都受當前配置約束
4 const $http = axios.create({
5 baseURL: '',
6 timeout: 1000,
7 //headers: {'X-Custom-Header': 'foobar'}
8 });
9
10 // 新增請求攔截器
11 $http.interceptors.request.use(function (config) {
12 // 在傳送請求之前做些什麼
13 return config;
14 }, function (error) {
15 // 對請求錯誤做些什麼
16 return Promise.reject(error);
17 });
18
19 // 新增響應攔截器
20 $http.interceptors.response.use(function (response) {
21 // 對響應資料做點什麼
22 return response.data; //返回響應資料的data部分
23 }, function (error) {
24 // 對響應錯誤做點什麼
25 return Promise.reject(error);
26 });
27
28 export default $http
api呼叫函式
1 export const getCourses = () => {
2 return $http.get('http://localhost:8080/teacher/courses')
3 }
在本例中，前端使用8081埠號，後端使用8080埠號，前端通過呼叫api請求資料失敗
postman測試此api介面正常
如何解決同源問題？
1、在vue根目錄下新建vue.config.js檔案並進行配置
vue.config.js檔案
1 module.exports = {
2 devServer: {
3 host: 'localhost', //主機號
4 port: 8081, //埠號
5 open: true, //自動開啟瀏覽器
6 proxy: {
7 '/api': {
8 target: 'http://localhost:8080/', //介面域名
9 changeOrigin: true, //是否跨域
10 ws: true, //是否代理 websockets
11 secure: true, //是否https介面
12 pathRewrite: { //路徑重置
13 '^/api': '/'
14 }
15 }
16 }
17 }
18 };
2、修改api請求
api呼叫函式
1 export const getCourses = () => {
2 return $http.get('/api/teacher/courses')
3 }
在這裡，因為vue.config.js配置了介面域名，所以此處url只需要寫餘下來的部分
url完全體
1 http://localhost:8080/teacher/courses
但是這裡因為運用到代理，所以在餘下的部分(即'/teacher/courses')前加上'/api',組成'/api/teacher/courses'
此時跨域問題解決，前端可以從後端介面拿到資料並顯示
問題解決！