前後端分離專案跨域問題是不可避免的。通常情況下前端由react、vue等框架編寫，通過ajax請求服務端api，傳輸資料用json格式。
那麼為什麼有跨域的問題呢？解決跨域問題有哪些方式？搞清楚這兩個問題我們需要了解一下什麼是同源策略。
同源策略（same origin policy）是一種安全約定，是所有主流瀏覽器最核心也是最基本的安全功能之一。同源策略規定：不同域的客戶端指令碼在沒有明確授權的情況下，不能請求對方的資源。同源指的是：網域名稱、協議、埠均相同。
另外，同源策略又分如下兩種情況：
dom同源策略：禁止對不同源的頁面dom進行操作，主要防止iframe的情況。比如iframe標籤裡放乙個支付寶付款的頁面，如果沒有同源策略，那麼釣魚**除了網域名稱不同，其他的則可以和支付寶的**一模一樣。
xmlhttprequest同源策略：禁止使用xhr物件向不同源的伺服器發起http請求。比如**記錄了銀行的cookie，這個時候你訪問了惡意**，黑客拿到你的cookie，再通過ajax請求之前的銀行**，便可以輕易的拿到你的銀行資訊。
所以，正是因為有了同源策略，大家的網路環境才相對的安全一些。
了解了同源策略，就知道為什麼會有跨域問題的產生了，都是為了安全。但是實際研發中，大家還是需要跨域去訪問資源。典型的應用場景就是前後端分離的專案了。那麼我們如何去解決跨域問題呢？
cors是一種w3c標準，定義了當產生跨域問題的時候，客戶端與服務端如何通訊解決跨域問題。實際上就是前後端約定好定義一些自定義的http請求頭，讓客戶端發起請求的時候能夠讓服務端識別出來該請求是過還是不過。
瀏覽器將cors請求分為簡單請求和非簡單請求：
簡單請求必須滿足以下兩個條件：
請求方式必須是head、get、post三種方法之一。
不滿足簡單請求條件的就是非簡單請求。針對非簡單請求，瀏覽器會發起預檢請求。預檢請求的意思是當瀏覽器檢查到你的頁面含有跨域請求的時候，會傳送乙個options請求給對應的伺服器，以檢測伺服器是否允許當前網域名稱的跨域請求。如果服務端允許該網域名稱請求，則返回204或200狀態碼，瀏覽器接收到允許請求時候再繼續傳送對應的get/post/put/delete請求。同時伺服器端也會告知瀏覽器預檢請求的快取時長是多少，在這個時間範圍內，瀏覽器不會再次發起預檢請求。
原理基本上就是上面說的這些，實際業務中我們如何通過配置來解決跨域問題呢？基本上常見的就是三種方式：
通常我們在nginx增加如下配置即可解決跨域問題：
用nginx這種方式是最舒服的，不需要客戶端和服務端多做其他工作，對**無入侵。
因為script標籤是不受瀏覽器同源策略的影響，允許跨域請求資源（我們的每乙個頁面都引用了大量第三方js檔案）。所以可以利用動態建立script標籤，通過src屬性發起跨域請求，這就是jsonp的原理。但是jsonp只支援get請求，所以並不是一種好的方式。
可以在服務端增加對跨域請求的支援：
這種方式相當於全域性過濾器，對所有請求都過濾一遍。
以上三種方式都可以一定程度上解決跨域問題，但是nginx配置和服務端控制不能同時存在，否則會報「access-control-allow-origin not allow multiple value」的錯誤。個人比較推薦nginx配置的方式，一勞永逸，不需要每個web專案都去編寫跨域的**。
太漂亮了！有了3款開源圖示庫，不用再去求設計師了
10個相見恨晚的vue.js庫！用好了，事半功倍！
太及時了！13個spring boot練手專案,用好了，公升職漲薪不用愁
程式設計師接私活必備後台框架，不用重複造輪子，網友：太好用了！
還在從頭到尾擼專案？這6個springboot專案用好了，事半功倍！
「00後縮寫黑話翻譯器」登上github熱榜，中年網民終於能看懂年輕人的awsl
前後端分離如何解決跨域問題
現在前後端分離開發很常見了，由於瀏覽器的同源策略，存在跨域問題 f12 報錯 no access control allow origin header is present on the requested resource 服務端你會發現 request.method是options，而且會請求...
前後端分離專案解決跨域問題
後台我使用的ssm框架搭建，前端使用vue cli腳手架完成。最開始我在後台寫了過濾器，但是前端請求資料的時候，能夠成功請求，可是在返回的時候報了如下錯誤 經過一番研究後，發現在前端其實就可以處理跨域的問題。步驟如下 在vue專案下的config資料夾下的 index.js 檔案中設定 var ur...
允許跨域訪問 前後端分離專案，如何解決跨域問題
跨域資源共享 cors 是前後端分離專案很常見的問題，本文主要介紹當springboot應用整合springsecurity以後如何解決該問題。cors全稱cross origin resource sharing，意為跨域資源共享。當乙個資源去訪問另乙個不同網域名稱或者同網域名稱不同埠的資源時，就...