在前後端分離開發中，需要前端呼叫後端api並進行內容顯示，如果前後端開發都在一臺主機上，則會由於瀏覽器的同源策略限制，出現跨域問題(協議、域名、埠號不同等)，導致不能正常呼叫api介面，給開發帶來不便。

封裝api請求

import axios from 'axios'

//axios.create建立一個axios例項，並對該例項編寫配置，後續所有通過例項傳送的請求都受當前配置約束
const $http = axios.create({
    baseURL: '',timeout: 1000,//headers: {'X-Custom-Header': 'foobar'}
});

// 新增請求攔截器
$http.interceptors.request.use(function (config) {
    // 在傳送請求之前做些什麼
    return config;
},fwww.cppcns.com
 
unction (error) {
    // 對請求錯誤做些什麼
    return Promise.reject(error);
});

// 新增響應攔截器
$http.interceptors.response.use(function (response) {
    // 對響應資料做點什麼
    return response.data;   //返回響應資料的data部分
},function (error) {
    // 對響應錯誤做點什麼
    return Promise.reject(error);
});

export default $http

api呼叫函式

export const getCourses = () => {
return $http.get('http://localhost:8080/teacher/courses')
}

在本例中，前端使用8081埠號，後端使用8080埠號，前端通過呼叫api請求資料失敗

postman測試此api介面正常

如何解決同源問題？

1、在根目錄下新建vue.cwww.cppcns.comonfig.檔案並進行配置

vue.config.js檔案

module.exports = {
    devServer: {
        host: 'localhost',//主機號
        port: 8081,//埠號
        open: true,//自動開啟瀏覽器
        proxy: {
            '/api': {
                target: 'http://localhost:8080/',//介面域名
                changeOrigin: true,//是否跨域
                ws: true,//是否代理 websockets
                secure: true,//是否https介面
       
 
         pathRewrite: {                          //路徑重置
                    '^/api': '/'
                }
            }
        }
    }
};

2、修改api請求

api呼叫函式

export const getCourses = () => {
  return $http.get('/api/teacher/courses')
}

在這裡，因為vue.config.js配置了介面域名，所以此處url只需要寫餘下來的部分

url完全體

http://localhost:8080/teacher/courses

但是這裡因為運用到代理，所以在餘下的部分(即'/teacher/courses')前加上'/api',組成'/api/teacher/courses'

此時跨域問題解決，前端可以從後端介面拿到資料並顯示

問題解決！

到此這篇關於Vue+SpringBoot前後端分離中的跨域問題的文章就介紹到這了,更多相關vue SpringBoot前後端分離跨域內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！