前後端分離開發 Web 、API、CORS

2023-05-16 14:49:32

資料查閱：

1， jquery使用CORS跨域請求時，為什麼cookie丢失了。

2，前後端分離了是不是伺服器就不能設定Cookie了？

3，前後端分離不用session怎麼才能實作身份驗證？

4，前後端分離的項目，如何解決登入問題

5， XMLHttpRequest.withCredentials

6，跨域請求設定withCredentials

7， XMLHttpRequest

8，浏覽器跨域方法與基于Fetch的Web請求最佳實踐

9，發送跨域請求傳回405錯誤問題

10， cors跨域之簡單請求與預檢請求（發送請求頭帶令牌token）

11，關于跨域的ajax

12，設定header，實作跨域通路

13，記一次header跨域與cookie共享

目前借鑒的方法：前端把account和password，送出到服務端的登入api，服務端驗證正确後，生成一個token，并把token和userId，存在緩存裡（推薦redis資料庫），然後把token傳回給前端。前端每次的請求頭中帶token，這樣就是簡單的token 機制

作者：文傑

連結：https://www.zhihu.com/question/36724306/answer/119983931

來源：知乎

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

參考以上這麼多，實際遇到的問題即是與記一次header跨域與cookie共享相同。

跨域請求API前提：

Web伺服器端：如果要用ajax傳cookie必須設定下面代碼，否則web伺服器無法傳遞cookie給api伺服器。
```
$.ajaxSetup(
{ crossDomain: true, 
    xhrFields: { 
        withCredentials: true 
        } 
});
           
```
API伺服器端Response.Headers必須設定 Access-Control-Allow-Origin，允許源為(Origin)Web伺服器的請求。如此伺服器才能接收web伺服器發送過來的cookie。
以上第1步實作web主機發送cookie 到 api主機，第2步實作API主機接收web主機。之後api主機要回傳cookie給web主機，API值必須設定：

4，API主機可以設定CookieDomain，指定隻接受哪個域名的主機。如下設定，如此Web主機：web.abc.com，API主機：api.abc.com 之間就可以互通cookie了。

CookieDomain預設是web主機的域名，如果web主機和API主機域名不相同，就不能互傳cookie了，要想其他辦法。
```
<add key="CookieDomain" value="abc.com" />
           
```

繼續閱讀