前端如何解決伺服器跨域
1. 前端跨域如何解決
什麼是跨域？
跨域是通俗的說是從一個域名去請求另一個域名的資源。比如從 www..com 頁面去請求 www.taobao.com 的資源。
跨域嚴格一點來說：兩個域名只要協議，域名，埠中只要有冊蘆一個不同，就被成為跨域
瀏覽器為什麼要限制跨域？
只有同域才可以拿到存在cookie中的信息，防止壞人隨意拿到我們的信息去做壞事
在團隊的配置中，我們為了減少前端對後端的依賴，提高開發效率，使前後端職責更清晰等等因素，我們不得不面伏姿讓對跨域的問題，那我們該怎麼解決呢？
1、 JSONP
原理：瀏覽器缺局對script的資源引用沒有同源限制，同時資源載入到頁面後會立即執行，所以通過動態插入script標簽即可達到跨域的請求
特點：數據為json格式
缺點：不能post
2、 CORS
原理 ： cors(Cross-Origin Resource Sharing)是 W3C CORS 工作草案 ，它定義了在跨域訪問資源時瀏覽器和伺服器之間如何通信。CORS背後的基本思想是使用自定義的HTTP頭部允許瀏覽器和伺服器相互了解對方，從而決定請求或響應成功與否
特點 ：是 JSONP 模式的現代版。支持更多的請求方式，XMLHttpRequest
缺點：需後端配合修改，現代瀏覽器支持cors，老瀏覽器依舊要用JSONP
3、 PROXY
原理：proxy代理用於將請求攔截，然後通過伺服器來發送請求，然後再將請求的結果傳遞給前端
node通常用 node-http-proxy 即可
proxy太通用了，weblack-dev-server里已集成，使用時直接配置即可 webpack-dev-server proxy代理
2. 前端解決跨域都有哪些方法
什麼是跨域？
瀏覽器發送的請求地址（URL）與所在頁面的地址 不同（埠/協議/域名 其一不同）。簡言之，瀏覽器發出的請求url，與其所在頁面的url不一樣。此時，同源策略會讓瀏覽器拒收 伺服器響應回來的數據，報錯信息如下：
最常用的四種跨域解決方案
1.cors
cors跨域資源共享允許是在服務端"Access-Control-Allow-Origin"欄位設置的，當將cors設置為允許某個地址訪問時，該地址就可以跨域訪問這個伺服器地址。當cors設置為"*"時即允許所有地址訪問時，則表示所有地址都可以跨域訪問這個伺服器地址的資源。
2、 通過jsonp跨域
Jsonp是Json的一種「使用模式」，他就可以解決瀏覽器遇到的跨域問題，我們可以動態創建script，再請求一個帶參網址實現跨域通信。用Jsonp請求得到的是JavaScript，相當於直接用JavaScript解析。
3、postMessage跨域
在h5中新增了postMessage方法，postMessage可以實現跨文檔消息傳輸，我們可以通過Windows的message事件來監聽發送跨文檔消息傳輸內容。
4、proxy（代理）
原理：因為同源策略只是針對瀏覽器的安全策略，但是服務端並不受同源策略的限制，也就不存在跨域的問題。
3. 請求介面時跨域問題，前端解決方法
在前後端介面請求中，由於瀏覽器的限制，會出現跨域的情況。常用的跨域方案有：
1、JSONP跨域
2、Nginx反向代理
3、伺服器端修改header
4、document.domain
5、window.name
6、postMessage
7、後台配置運行跨域
當一個請求url的 協議、域名、埠 三者之間任意一個與當前頁面url不同即為跨域
特別注意兩點：
1、如果是協議和埠造成的跨域問題「前台」是無能為力的，
2、在跨域問題上，域僅僅是通過「URL的首部」來識別而不會去嘗試判斷相同的ip地址對應著兩個域或兩個域是否在同一個ip上。
4. 前端跨域的幾種解決方案
1.Cookie、LocalStorage和IndexDB無法讀取
2.DOM和JS對象無法獲取
3.Ajax請求不能發送
1.簡單請求
2.非簡單請求
1.請求方法是以下三種方法之一.
2.HTTP請求頭必須是下面幾種欄位
對於簡單請求就是瀏覽器直接發出CORS,具體來說就是請求頭添加Origin欄位
如果Origin指定的域名在許可范圍內,伺服器返回的響應，會多出幾個頭信息響應欄位
1.Access-Control-Allow-Origin：必選
2.Access-Control-Allow-Credentials:可選
3.Access-Control-Expose-Headers
"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭信息裡面，關鍵欄位是Origin，表示請求來自哪個源。
除了Origin欄位，「預檢」請求的頭信息包括兩個特殊欄位。
1.Access-Control-Request-Method
2.Access-Control-Request-Headers
伺服器收到「預檢」請賣型求以後，檢查螞喚了Origin、Access-Control-Request-Method和Access-Control-Request-Headers欄位以後，確認允許跨源請求，就可中物猜以做出回應。
5. 如何解決前端跨域問題
可以使用伺服器代理或者在後端設置允許跨域。
現在的項目一般是在後端設置允許跨域，前端在帶有允許跨域的情況下，可以像沒有跨域一樣正常訪問。
如果前端單獨發布到伺服器，也可以在伺服器是設置代理，使用代理轉發請求。