前後端分離專案中前端如何呼叫後端介面?

2021-10-21 14:16:52 字數 1367 閱讀 3557

前後端啟動專案,無法訪問介面。這是因為前後端的請求埠不一樣,如果是本地開發最簡單的方式就是禁用谷歌瀏覽器的安全策略,可以參考這裡。

這個問題是跨域引起的,下面我們正式開始講關於跨域的問題。

這裡我只推薦這兩種方式跨域,其它的跨域方式都還有很多但都不推薦,真心主流的也就這兩種方式。

開發環境

生產環境

方案一corscors

方案二proxynginx

方案一:cors全稱為 cross origin resource sharing(跨域資源共享)。這種方案對於前端來說沒有什麼工作量,和正常傳送請求寫法上沒有任何區別,工作量基本都在後端這裡。每一次請求,瀏覽器必須先以options請求方式傳送乙個預請求(也不是所有請求都會傳送 options, cors),通過預檢請求從而獲知伺服器端對跨源請求支援的http方法。在確認伺服器允許該跨源請求的情況下,再以實際的http請求方法傳送那個真正的請求。推薦的原因是:只要第一次配好了,之後不管有多少介面和專案復用就可以了,一勞永逸的解決了跨域問題,而且不管是開發環境還是正式環境都能方便的使用。詳細 mdn 文件

但總有後端覺得麻煩不想這麼搞,那純前端也是有解決方案的。

方案二:在dev開發模式下可以下使用 webpack 的proxy使用也是很方便,參照 文件 就會使用了。但這種方法在生產環境是不能使用的。在生產環境中需要使用nginx進行反向**。不管是proxynginx的原理都是一樣的,通過搭建乙個中轉伺服器來**請求規避跨域的問題

開發環境

生產環境

生產環境的話還是比較推薦nginx

比如後端位址為http://localhost:8089/mall_war/*.do

那麼前端在**裡只需要訪問/mall_war/*.do就可以,預設發的是部署伺服器的ip來訪問

然後再nginx裡配置如下

server 

location ^~/mall_war/

}

前後端分離專案中的坑

1 connectionabortederror winerror 10053 你的主機中的軟體中止了乙個已建立的連線。解決方式,ajax中async false ajax type post datatype json cache false,async false,headers content...

前端通訊, 前後端分離 前後端不分離

基於後端的通訊 後端完成 pc端用 基於h5的websocket來完成 應用於移動端 低版本瀏覽使用的socket.io 案例 利用node.js流來生成壓縮包 fszlib 市場流行 前後端分離好處 很久以前 10 13年 前後端不分離專案 不分離 前端 後端 jsp 前後端專案整合 成功 前端 ...

前後端分離專案

由於目前公司需要為已經存在的專案統一單點登入,而技術選型後採用的是apereo的cas。但是由於官方cas文件的混亂性 你懂得!並且其官方的例項和網上的例項教程都是基於傳統的專案 也就是非前後端分離專案 因此對於前後端分離的專案整合cas的可參考的資料就比較少,於是就有了下面的前後端分離專案基於ca...