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 請求頭) 而不是寫死的網域或*

大概實作 (偽代碼)：

<code>// 允许跨域访问的域名数组
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"]);</code>

不過話又說回來 請求頭都是可以模擬的 所以建議將接口請求參數加密 前端腳本壓縮混淆
參考網易雲音樂的接口加密吧（去抓下包看看）

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

nginx反向代理... 原來你自問自答了...

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

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

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

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

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