1. 程式人生 > 實用技巧 >如何解決vue專案開發過程中的跨域問題

如何解決vue專案開發過程中的跨域問題

在使用vue框架搭建前端專案的過程中不可避免的需要向後端請求資料進行測試,但是vue專案啟動過程中會使用一個埠,jar包啟動使用另外一個埠,就造成了跨域的問題,導致資料無法請求到,此時可以通過對配置檔案的修改,使用反向代理,完成開發環境中資料請求的需求。

方法:在專案檔案中找到config資料夾裡邊的index.js檔案,找到dev中的proxyTable,用以下程式碼進行替換:

proxyTable: {
      '/api': {
        target: 'http://localhost:8083', //這裡面是你要訪問的IP地址
        changeOrigin: true
, //開啟代理 pathRewrite: { '^/api': '' } } },

然後將target中的內容替換成你要訪問的資料的地址和埠,也就是目標地址和埠,其餘的不需要變動,然後再使用axios進行封裝請求方法的時候,將baseURL設定成/api/search即可,當然我的專案名是search,所以/api/後邊拼接的是search,實際中專案名如果是xxx,應該寫成/api/xxx,需要注意的一點是,這僅僅是開發環境中為了獲取資料進行的操作,需要進行打包部署之前,需要將baseURL改成./,然後修改一些其他路徑(此處可參考另外一篇博文打包部署前的設定),然後進行打包即可。