1. 程式人生 > 程式設計 >VueCli4專案配置反向代理proxy的方法步驟

VueCli4專案配置反向代理proxy的方法步驟

Vue Cli4建立專案之後,沒有配置vue.config.js,如果直接發起axios請求,可能會引起跨域問題.

以豆瓣電影首頁的最近熱門 為例:

axios({
  method: "get",url: "https://movie.douban.com/j/search_subjects",params: {
  type: "movie",tag: "熱門",page_limit: 50,page_start: 0
  }
 }).then(res => {
  console.log(res.data);
 });

如果直接發起請求必然會引起跨域錯誤,只需要在專案根目錄手動建立vue.config.js檔案:

module.exports = {
 devServer: {
 proxy: {
  "/j": {
  target: "https://movie.douban.com",changeOrigin: true
  }
 }
 }
};

然後修改axios請求的url地址:

url:"/j/search_subjects"

最後 重啟該專案 重啟該專案 重啟該專案 即可

到此這篇關於VueCli4專案配置反向代理proxy的方法步驟的文章就介紹到這了,更多相關VueCli4反向代理proxy內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!