vue2+webpack使用axios跨域請求資料的設定
阿新 • • 發佈：2018-12-28
初次使用vue搭建專案，在進行互動請求資料時候報了經常會出現的錯誤，
Failed to load http://localhost:3000/add: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
解決辦法：
使用vue init webpack pro(專案名稱)建立的專案是基於webpack的專案，瞭解webpack的都應該知道它是一個JavaScript 應用程式的靜態模組打包器，專案所用到的外掛，npm包等都通過它匯入使用，跨域設定也通過它設定。
專案目錄如圖所示，我們要修改的是webpack的配置檔案 config/index.js
將原來的
proxyTable: {}修改為
proxyTable: {
'/api': {
target: 'http://localhost:3000/', //是你要請求後臺的域名和埠
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
然後再使用axios請求的時候就不會報跨域的錯誤了！！