記錄在一次前後端分離的專案開發中遇到的坑

2022-07-30 06:09:11 字數 828 閱讀 2223

問題如下圖:

在一次實際的專案開發中,我負責前端開發,使用的是vue+axios,後台使用的是php,由於我們的開發環境處於不同的網域名稱和埠下,

所以出現了跨域問題,當然php服務端 可以直接解決這個問題,但是後端設定之後,前端每次都會先發出options請求,然後再post請求,

這說白了,就是每個介面請求兩次。我們來分析下原因:

出於安全考慮,並不是所有網域名稱訪問後端服務都可以。其實在正式跨域之前,瀏覽器會根據需要發起一次預檢(也就是option請求),用來讓服務端返回允許的方法(如get、post),

被跨域訪問的origin(**或者域),還有是否需要credentials(認證資訊)等。那麼瀏覽器在什麼情況下能預檢呢?

解決方案:

1,axios 請求頭中有其它引數(由於開發需求,請求頭中確實加入了其它的一些引數,例如token)

解決辦法:把異常引數去掉即可

axios.defaults.headers['

content-type

'] = '

';

這樣改完之後, 還需要把資料格式化,接著看:

引入完這個庫之後,把傳遞的資料進行 

qs.stringify(),
是不是 ok了,然後我們接著發請求,那麼options請求就沒了。

用vue前後端分離專案開發記錄

一 軟體安裝 1.1 檢測node 是否安裝 1.2 安裝 映象 cnpm 1.3 安裝vue cli 1.4 檢查是否安裝vue cli腳手架成功 1.5安裝webpack 模組管理工具 二 建立vue專案 2.1 建立乙個基於webpack專案 2.2 進入專案檔案 2.3以生產環境啟動專案 2...

一次前後端分離架構的實踐

拜讀了 pkwenda 的前後端分離架構系列文章之後,感覺又get到了新技能,於是乎深入地學習了vue一波,下面談談我的感受。最大感受就是 解耦了,前後端 不再混雜在乙個專案中,開發人員可以各司其職,但同時部署也變得複雜了,原本只需部署乙個專案的,現在我們不得不部署兩個專案的,這無疑增加了部署的難度...

用Delphi開發前後端分離的Web專案

delphi傳統上是開發cs軟體和windows服務端應用的利器。在過去10年間,delphi已發展為跨平台開發工具,全面支援window android ios linux等32 64位平台。在web開發領域,從傳統的靜態html,到動態伺服器頁面 類似asp jsp php等 再到現代的前後端分...