javascript - 前後端分離中碰到跨域問題大家是怎麼解決的？

目前我在我的部落格的時候，考慮到使用前後端分離，將前端和後端邏輯單獨放在兩個版本庫，部署在兩台伺服器上。

我的主網域名稱為: godtail.cn（目前使用ghost，新的部落格正在寫...）

• 前端網域名稱為: www.godtail.cn | godtail.cn | m.godtail.cn

• 後端網域名稱為: api.godtail.cn

但是在通訊的時候發現，提示跨域了，好吧，我之前以為在主網域名稱相同情況下不會跨域（同網域名稱不同連接埠也會跨域）。

目前我知道的可以解決的方法有兩種：

1. 使用JSONP，說實在我不是特別喜歡使用JSONP，感覺會導致安全問題，或者效率下降（這兩點僅是我的猜測）。
   猜測的理由：

   • 任何來源都能訪問, 會不會存在js注入？

   • 後端和前端需要都JSONP進行處理。（寫起來不爽，而且是所有請求都要使用JSONP）。

2. 在後端添加跨域頭

   • 如果前端網域名稱比較多，需要添加很多網域名稱，需要維護。如果別的系統需要請求你的介面，添加進跨域頭？不好處理...

大家有沒有更好一點的解決方案？

================【 9-22 17：25 】======================

補充下，設定跨域頭，可以設定ip，僅供自己內部調用還是可以的。如果需要外部調用的話，就滿足不了，另外不確定有沒有老版本瀏覽器安全色問題。

回複內容：

目前我在我的部落格的時候，考慮到使用前後端分離，將前端和後端邏輯單獨放在兩個版本庫，部署在兩台伺服器上。

我的主網域名稱為: godtail.cn（目前使用ghost，新的部落格正在寫...）

• 前端網域名稱為: www.godtail.cn | godtail.cn | m.godtail.cn

• 後端網域名稱為: api.godtail.cn

但是在通訊的時候發現，提示跨域了，好吧，我之前以為在主網域名稱相同情況下不會跨域（同網域名稱不同連接埠也會跨域）。

目前我知道的可以解決的方法有兩種：

1. 使用JSONP，說實在我不是特別喜歡使用JSONP，感覺會導致安全問題，或者效率下降（這兩點僅是我的猜測）。
   猜測的理由：

   • 任何來源都能訪問, 會不會存在js注入？

   • 後端和前端需要都JSONP進行處理。（寫起來不爽，而且是所有請求都要使用JSONP）。

2. 在後端添加跨域頭

   • 如果前端網域名稱比較多，需要添加很多網域名稱，需要維護。如果別的系統需要請求你的介面，添加進跨域頭？不好處理...

大家有沒有更好一點的解決方案？

================【 9-22 17：25 】======================

補充下，設定跨域頭，可以設定ip，僅供自己內部調用還是可以的。如果需要外部調用的話，就滿足不了，另外不確定有沒有老版本瀏覽器安全色問題。

當然是後端添加 Access-Control-Allow-Origin
至於你說的前端網域名稱過多的問題，讓後端用點小技巧能處理好的，不麻煩
思路：為 Access-Control-Allow-Origin 添加目標網域名稱 (Origin 要求標頭) 而不是寫死的網域名稱或 *

大概實現 (虛擬碼)：

// 允許跨域訪問的網域名稱數組string[] allowOrigins = {    "http://www.godtail.cn/",     "http://godtail.cn/",     "http://m.godtail.cn/",};// 判斷 origin 是否是自己的前端網域名稱，如果是則添加if(allowOrigins.Count(x => x.Contains(Request.Headers["Origin"])) > 0)    Response.Header.Add("Access-Control-Allow-Origin", Request.Headers["Origin"]);

不過話又說回來 要求標頭都是可以類比的 所以建議將介面請求參數加密 前端指令碼壓縮混淆
參考網易雲音樂的介面加密吧（去抓下包看看）

考慮下在後端添加跨域頭，允許所有網域名稱，然後在代碼裡過濾網域名稱，不符合要求的網域名稱直接返回 404。

nginx反向 Proxy... 原來你自問自答了...

在伺服器端設定頭部 'Access-Control-Allow-Origin:*';

樓上說的這個。可以指定訪問的 地址吧~

在前端代碼不輸的伺服器進行網域名稱轉寄

跨域頭不是可以寫成正則的形式嗎

我採用的第一種方式，jsonp,callback,要是這種請求多了，寫起來也麻煩；
第二種方式，試了一下不好用啊，是在response上設定Access-Control-Allow-Origin..*?

