『壹』 如何解決前端跨域問題
可以使用伺服器代理或者在後端設置允許跨域。
現在的項目一般是在後端設置允許跨域，前端在帶有允許跨域的情況下，可以像沒有跨域一樣正常訪問。
如果前端單獨發布到伺服器，也可以在伺服器是設置代理，使用代理轉發請求。
『貳』 如何解決IE瀏覽器跨域問題
工具：
IE瀏覽器
方法如下：
1、打開IE瀏覽器，在工具菜單下選擇Internet選項，打開Internet選項卡
2、切換到安全選項卡下，點擊可信站點，然後單擊站點按鈕
3、可信站點窗口輸入網址到可信站點的區域，點擊添加按鈕，網址則會添加到網站列表下，最後關閉可信站點窗口
4、還是在安全選項卡下的可信站點，點擊自定義級別
5、打開站點區域窗口，找到跨域瀏覽窗口和框架選擇啟用
6、在當前窗口中繼續往下翻，通過域訪問數據源也選擇啟用，點擊確定關閉受信任的站點區域窗口
7、在Internet窗口也點擊確定按鈕，同時關閉瀏覽器
8、在請求的js腳本中添加是否允許跨域訪問的許可權，jQuery.support.cors默認值為true，則代表允許；反之，不允許。設置完成，重新打開瀏覽器驗證即可。
『叄』 如何配置解決跨域的問題
方法/步驟
伺服器端對於CORS的支持，是通過設置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置，就可以允許Ajax進行跨域的訪問
打開控制面板，選擇管理工具
選擇iis
右鍵單擊自己的網站，選擇瀏覽
打開網站所在目錄
用記事本打開web.config文件添加如圖的一句話，保存，重啟網站就好了，客戶端直接用html5編輯，不用任何設置
『肆』 如何解決IE瀏覽器跨域問題
工具：
IE瀏覽器
方法如下：
1、打開IE瀏覽器，在工具菜單下選擇Internet選項，打開Internet選項卡
2、切換到安全選項卡下，點擊可信站點，然後單擊站點按鈕
3、可信站點窗口輸入網址到可信站點的區域，點擊添加按鈕，網址則會添加到網站列表下，最後關閉可信站點窗口
4、還是在安全選項卡下的可信站點，點擊自定義級別
5、打開站點區域窗口，找到跨域瀏覽窗口和框架選擇啟用
6、在當前窗口中繼續往下翻，通過域訪問數據源也選擇啟用，點擊確定關閉受信任的站點區域窗口
7、在Internet窗口也點擊確定按鈕，同時關閉瀏覽器
8、在請求的js腳本中添加是否允許跨域訪問的許可權，jQuery.support.cors默認值為true，則代表允許；反之，不允許。設置完成，重新打開瀏覽器驗證即可。
『伍』 使用nginx代理解決跨域問題
先說說跨域這事情吧。早在13年，我剛接觸前端開發的時候就遇到了跨域，那時候剛開始流行前後端分離。解決跨域就是直接用get jsonp。還是小白的我，也沒有去想跨域的其它解決方式和為什麼要採用這種解決方式。
最近，做一個二次開發的項目，也碰到了用網頁請求http post，瀏覽器跨域，不能獲取返回數據的問題，所以再次來梳理下這個跨域，為什麼最後選擇了nginx代理。
首先，什麼是跨域呢？首先需要了解的是同源和跨源的概念。對於相同源，其定義為：如果協議、埠（如果指定了一個）和主機對於兩個頁面是相同的，則兩個頁面具有相同的源。 只要三者之一任意一點有不同，那麼就為不同源。 同源策略限制從一個源載入的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。當一個資源從與該資源本身所在的伺服器的域或埠不同的域或不同的埠請求一個資源時，資源會發起一個跨域 HTTP 請求。跨域不一定是瀏覽器限制了發起跨站請求，而也可能是跨站請求可以正常發起，但是返回結果被瀏覽器攔截了。 簡單的來說，出於安全方面的考慮，頁面中的JavaScript無法訪問其他伺服器上的數據，即「同源策略」。而跨域就是通過某些手段來繞過同源策略限制，實現不同伺服器之間通信的效果。
跨域的解決方案也有很多種。
類型一：有些瀏覽器可以設置 ，降低它的安全性。但是對於一個網站，要求設置瀏覽器是不切合實際的。
類型二：直接用form方式 ，這種情況下不是ajax請求，而是直接訪問目標地址了，不存在跨域問題，但是這個頁面已經跳轉了。而我們想實現的只是取另外一個地址的數據到本地顯示而已。
類型三：服務端語言是能夠處理的情況下。
1、CORS 是一個W3C標准，全稱是」跨域資源共享」（Cross-origin resource sharing）。它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。跨域資源共享（ CORS ）機制允許 Web 應用伺服器進行跨域訪問控制，從而使跨域數據傳輸得以安全進行。其需要服務端和客戶端同時支持。
對於簡單請求，瀏覽器直接發出CORS請求。具體來說，就是在頭信息之中，增加一個Origin欄位。如果Origin指定的源，不在許可范圍內，伺服器會返回一個正常的HTTP回應。瀏覽器發現，這個回應的頭信息沒有包含Access-Control-Allow-Origin欄位（詳見下文），就知道出錯了，從而拋出一個錯誤，被XMLHttpRequest的onerror回調函數捕獲。注意，這種錯誤無法通過狀態碼識別，因為HTTP回應的狀態碼有可能是200。如果Origin指定的域名在許可范圍內，伺服器返回的響應，會多出幾個頭信息欄位。 Access-Control-Allow-Origin 該欄位是必須的。它的值要麼是請求時Origin欄位的值，要麼是一個*，表示接受任意域名的請求。 Access-Control-Allow-Credentials 該欄位可選。 Access-Control-Expose-Headers 該欄位可選。
可以說這種辦法主要在header上下功夫，設置Access-Control-Allow-Origin為所有*允許訪問。雖然說它支持所有的請求方式，post，delete，put等等，但是它不能兼容ie6，7等等。
例如下圖的nodejs express 例子：
2、服務端的http ajax請求全部改為 get jsonp方式 。該方式能夠兼容老式瀏覽器。
3、iframe window.name 這種傳值得方式很巧妙，兼容性也很好。但是在要訪問數據的地址那個伺服器要有一個空的中間頁面拿來用。
4、postMessage ， html5 window.postMessage。 同iframe window.name有點像，也是需要服務端有個空的html拿來接收數據。而且現在的postMessage兼容性也不好。
5、document.domain 修改為頂級域名。
6、 WebSocket ，協議不實行同源政策，只要伺服器支持，就可以通過它進行跨源通信。
類型四：不是簡單的前後端。假如有個第三方的api，自己有一個網站前端，一個網站後端。
1、自己的網站端和後端源碼放在同一個服務埠和目錄下，不存在跨域。當直接用網站前端的http訪問第三方api，瀏覽器跨域。此時，改為由網站後端的服務端語言訪問，做個中間人，將訪問的數據給網頁前端。
2、網站前端和後端不是同源的，採用以上的跨域方案，譬如CORS。同樣的網站後端做中間人，訪問第三方api，再轉給網頁前端。
3、使用nginx 反向代理解決跨域問題。 網站前端訪問nginx服務的地址，nginx設置代理地址為訪問第三方api地址，當訪問代理地址的時候，瀏覽器訪問的是nginx服務的地址，實際是訪問第三方api地址。
注意：此時，如果目錄下有個proxy.html,因為設置代理地址是/proxy，碰到這個地址就被轉到」https://192.168.18.175:8088/api/v1.0.2/「，所以要訪問proxy.html是訪問不到的。
4、使用nginx代理地址是解決生產環境發布的問題了，那麼我在開發的時候使用angular這樣需要打包的框架怎麼辦呢。當然在開發環境下，angular也是由類似代理地址的解決方案的。
（1）創建配置代理文件：假設後端服務的訪問地址為http://192.168.19.175:8088/api/v1.0.2/login，我們可以創建一個proxy.conf.json文件，放在package.json同目錄下。
（2）改寫package.json文件 ，採用--proxy-config命令（angular自帶的命令）。
(3)ajax訪問代理地址
此時， 執行 npm start ，即可發現，瀏覽器訪問http://localhost:4200/api/v1.0.2/login 的同源地址，實際上是訪問http://192.168.18.175:8088/api/v1.0.2/login.
angular在開發環境下代理地址的方法類似在生產環境下使用的nginx代理。但是測試angular是有一個/api代理地址的巧合。剛好第三方api上面的地址有個api，才能使用這個地址，並且能夠簡寫一個api，才能成功訪問，如果更改為其它的，譬如proxy，就測試失敗。而且proxy.conf.json文件下的設置也只能是域名和埠。所以，本人測試，這或許是個巧合或者是缺陷。
五、其它
當然，跨域這個算是歷史性的問題，以後也會存在這個問題。除了上面各種方法，以及根據各種方法使用的場合，還有許多其它的方法。例如各大流行框架react，vie應該也有像angular一樣，能夠處理跨域的開發環境方案，接下來，還是要繼續學習和積累。
『陸』 如何解決跨域問題
打開IE瀏覽器，在工具菜單下選擇Internet選項，打開Internet選項卡
切換到安全選項卡下，點擊可信站點，然後單擊站點按鈕
可信站點窗口輸入網址到可信站點的區域，點擊添加按鈕，網址則會添加到網站列表下，最後關閉可信站點窗口
還是在安全選項卡下的可信站點，點擊自定義級別
打開受信任的站點區域窗口，找到跨域瀏覽窗口和框架選擇啟用
在當前窗口中繼續往下翻，通過域訪問數據源也選擇啟用，點擊確定關閉受信任的站點區域窗口
在Internet窗口也點擊確定按鈕，同時關閉瀏覽器
在請求的js腳本中添加是否允許跨域訪問的許可權，jQuery.support.cors默認值為true，則代表允許；反之，不允許。設置完成，重新打開瀏覽器驗證即可
『柒』 怎麼設置chrome的跨域訪問
方法/步驟
1,首先谷歌快捷方式上右擊，在下拉列表中選擇屬性。
『捌』 遇上瀏覽器跨域問題怎麼辦
出於安全原因，瀏覽器禁止 Ajax 調用駐留在當前原點之外的資源。例如，當你在一個標簽中檢查你的銀行賬戶時，你可以在另一個選項卡上擁有 EVILL 網站。來自 EVILL 的腳本不能夠對你的銀行 API 做出 Ajax 請求（從你的帳戶中取出錢！）使用您的憑據。
跨源資源共享（CORS）是由大多數瀏覽器實現的 W3C 規范，允許你靈活地指定什麼樣的跨域請求被授權，而不是使用一些不太安全和不太強大的策略，如 IFRAME 或 JSONP。
Spring Framework 4.2 GA 為 CORS 提供了第一類支持，使您比通常的基於過濾器的解決方案更容易和更強大地配置它。所以 springMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin
1. controller 配置 CORS
1.1 controller 方法的 CORS 配置，您可以向 @RequestMapping 註解處理程序方法添加一個 @CrossOrigin 註解，以便啟用 CORS（默認情況下，@CrossOrigin 允許在 @RequestMapping 註解中指定的所有源和 HTTP 方法）：
其中 @CrossOrigin 中的 2 個參數：
1.2 為整個 controller 啟用 @CrossOrigin
在這個例子中，對於 retrieve() 和 remove() 處理方法都啟用了跨域支持，還可以看到如何使用 @CrossOrigin 屬性定製 CORS 配置。
1.3 同時使用 controller 和方法級別的 CORS 配置，Spring 將合並兩個注釋屬性以創建合並的 CORS 配置。
1.4 如果您正在使用 Spring Security，請確保在 Spring 安全級別啟用 CORS，並允許它利用 Spring MVC 級別定義的配置。
2. 全局 CORS 配置
JavaConfig
使整個應用程序的 CORS 簡化為：
您可以輕松地更改任何屬性，以及僅將此 CORS 配置應用到特定的路徑模式：
如果您正在使用 Spring Security，請確保在 Spring 安全級別啟用 CORS，並允許它利用 Spring MVC 級別定義的配置。
3. XML命名空間
還可以將 CORS 與 MVC XML 命名空間配置。
a) 如果整個項目所有方法都可以訪問，則可以這樣配置；此最小 XML 配置使 CORS 在 /** 路徑模式具有與 JavaConfig 相同的預設屬性：
其中 * 表示匹配到下一層；** 表示後面不管有多少層，都能匹配。
如：
這個可以匹配到的路徑有：
不能匹配的：
因為 * 只能匹配到下一層路徑，如果想後面不管多少層都可以匹配，配置如下：
請求路徑有 /api/，方法示例如下：
c) 如果使用 Spring Security，不要忘記在 Spring 安全級別啟用 CORS：
4. How does it work?
CORS 請求（包括預選的帶有選項方法）被自動發送到注冊的各種 HandlerMapping 。它們處理 CORS 准備請求並攔截 CORS 簡單和實際請求，這得益於 CorsProcessor 實現（默認情況下默認 DefaultCorsProcessor 處理器），以便添加相關的 CORS 響應頭（如 Access-Control-Allow-Origin）。 CorsConfiguration 允許您指定 CORS 請求應該如何處理：允許 origins, headers, methods 等。
a) AbstractHandlerMapping 類的 setCorsConfiguration() 方法允許指定一個映射，其中有幾個 CorsConfiguration 映射在路徑模式上，比如 /api/**。
b) 子類可以通過重寫 AbstractHandlerMapping 類的 getCorsConfiguration(Object, HttpServletRequest) 方法來提供自己的 CorsConfiguration。
c) 處理程序可以實現 CorsConfigurationSource 介面（如 ResourceHttpRequestHandler），以便為每個請求提供一個 CorsConfiguration。
5. 基於過濾器的 CORS 支持
1. 是 springMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin
2. 非 @CrossOrigin 沒有解決跨域請求問題，而是不正確的請求導致無法得到預期的響應，導致瀏覽器端提示跨域問題。
3. 在 Controller 註解上方添加 @CrossOrigin 註解後，仍然出現跨域問題，解決方案之一就是：
在 @RequestMapping 註解中沒有指定 Get、Post 方式，具體指定後，問題解決。
類似代碼如下：
參考文章：
1. 官方文檔 https://spring.io/blog/2015/06/08/cors-support-in-spring-framework
2. http://fanshuyao.iteye.com/blog/2384189
3. https://blog.csdn.net/taiyangnimeide/article/details/78305131
4. https://blog.csdn.net/snowin1994/article/details/53035433
『玖』 跨域問題解決方法
跨域？他是瀏覽器的 同源策略 造成的，是瀏覽器對javascript施加的安全限制。所謂同源是指：域名、協議、埠均相同。
解決
原理：利用標簽具有可跨域的特性，可實現跨域訪問介面，需要後端的支持。
伺服器在收到請求後，解析參數，計算返還數據，輸出messagetow（data）字元串。
缺點：只能發送get請求，無法訪問伺服器的響應文本（單向請求），即只能獲取數據不能改數據。
通過ajax請求不同域的實現，底層不是靠XmlHttpRequest而是script，所以不要被這個方法給迷惑了。
在ajax請求中類型如果是type是get post，其實內部都只會用get，因為其跨域的原理就是用的動態載入script的src，所以我們只能把參數通過url的方式傳遞
其實jquery內部會轉化成
http://192.168.31.137/train/test/jsonpthree?callback=messagetow
然後動態載入http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron"><script type="text/javascript" src=" http://192.168.31.137/train/test/jsonpthree?callback=messagetow "></script>
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
Cross-Origin Resource Sharing（CORS）跨域資源共享是一份瀏覽器技術的規范，提供了 Web 服務從不同域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，確保安全的跨域數據傳輸。現代瀏覽器使用CORS在API容器如XMLHttpRequest來減少HTTP請求的風險來源。與 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。伺服器一般需要增加如下響應頭的一種或幾種：
跨域請求默認不會攜帶Cookie信息，如果需要攜帶，請配置下述參數：
window.name通過在iframe（一般動態創建i）中載入跨域HTML文件來起作用。然後，HTML文件將傳遞給請求者的字元串內容賦值給window.name。然後，請求者可以檢索window.name值作為響應。
iframe標簽的跨域能力；
window.name屬性值在文檔刷新後依舊存在的能力（且最大允許2M左右）。
每個iframe都有包裹它的window，而這個window是top window的子窗口。 contentWindow 屬性返回<iframe>元素的Window對象。你可以使用這個Window對象來訪問iframe的文檔及其內部DOM。
HTML5新特性，可以用來向其他所有的 window 對象發送消息。需要注意的是我們必須要保證所有的腳本執行完才發送 MessageEvent，如果在函數執行的過程中調用了它，就會讓後面的函數超時無法執行。
前提條件：這兩個域名必須屬於同一個基礎域名!而且所用的協議，埠都要一致，否則無法利用document.domain進行跨域，所以只能跨子域
在 根域 范圍內，允許把domain屬性的值設置為它的上一級域。例如，在」aaa.xxx.com」域內，可以把domain設置為 「xxx.com」 但不能設置為 「xxx.org」 或者」com」。
現在存在兩個域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的頁面，由於其document.name不一致，無法在aaa下操作bbb的js。可以在aaa和bbb下通過js將document.name = 'xxx.com';設置一致，來達到互相訪問的作用。
WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通信，同時允許跨域通訊，是server push技術的一種很棒的實現。相關文章，請查看： WebSocket 、 WebSocket-SockJS
**需要注意：**WebSocket對象不支持DOM 2級事件偵聽器，必須使用DOM 0級語法分別定義各個事件。
同源策略是針對瀏覽器端進行的限制，可以通過伺服器端來解決該問題,例如nginx
DomainA客戶端（瀏覽器） ==> DomainA伺服器 ==> DomainB伺服器 ==> DomainA客戶端（瀏覽器）
『拾』 Web前端中實現跨域的方法有哪些
今天小編要跟大家分享的文章是關於Web前端中實現跨域的方法有哪些?正在從事Web前端工作的小夥伴們來和小編一起看一看本篇文章吧，希望能夠對大家有所幫助。
一、同源策略
同源策略是瀏覽器的一個安全功能，同源即協議、域名、埠三者相同。它限制了從一個源載入的文檔或腳本與另一個源進行數據交互，所以#下的JS腳本請求#的數據會被拒絕。
注意：跨域限制訪問，其實是瀏覽器的同源策略限制。
二、跨域
當協議、域名、埠任意一個不同時，都算不同域。不同域之間相互請求資源，就算跨域。
注意：跨域並不是請求發不出去，請求能發出去，服務端能收到請求並正常返回結果，只是結果被瀏覽器攔截了。
三、跨域的幾種方法
(1)有三個標簽允許跨域載入資源
(2)JSONP
JSONP(JSONwithPadding)是json的一種"使用模式"，可以讓網頁從別的域名獲取資料，即跨域讀取數據。
JSONP由兩部分組成：回調函數和數據。回調函數是當響應到來時在頁面調用的數據。數據則為傳入回調函數的JSON數據。
JSONP通過
src="#/try/ajax/jsonp.php?jsoncallback=callbackFunction">
(3)CORS
CORS(Cross-OriginResource
Sharing，跨域源資源共享)，基本思想為使用自定義的HTTP頭部讓瀏覽器與伺服器進行溝通，需要瀏覽器支持CORS。
客戶端：發送HTTP請求時，額外添加一個Origin頭部，包含請求頁面的源信息，伺服器根據此信息決定是否響應。
Origin:http://www.#
服務端：在響應頭添加Access-Control-Allow-Origin，回發相同源信息(公共資源可回「*」)，若沒有此頭部，或頭部源信息不匹配，瀏覽器會駁回請求。
Access-Control-Allow-Origin:http://www.#
(4)WebSockets
Websocket是HTML5的一個持久化的協議，它實現了瀏覽器與伺服器的全雙工通信，同源策略對其不適用。
WebSocket在建立連接時要藉助HTTP協議，建立連接後會從HTTP交換為WebSocket協議，WebSocket的server
(服務端)與client(客戶端)都能主動向對方發送或接收數據。只有支持WebSocket協議的伺服器才能正常工作。
(5)postMessage
如果兩個網頁不同源，就無法拿到對方的DOM。典型的例子是iframe窗口和window.open方法打開的窗口，它們與父窗口無法通信。HTML5為了解決這個問題，引入了一個全新的API：跨文檔通信
API(Cross-document
messaging)。這個API為window對象新增了一個window.postMessage方法，允許跨窗口通信，不論這兩個窗口是否同源。
postMessage方法的第一個參數是具體的信息內容，第二個參數是接收消息的窗口的源(origin)。也可以設為*，表示不限制域名，向所有窗口發送。
以上就是小編今天為大家分享的關於Web前端中實現跨域的方法有哪些的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
文章來源：原創CodeEditCodeEdit