扣丁學堂HTML5培訓之20K前端面試如何回答ajax跨域問題

今天扣丁學堂HTML5培訓老師給你們分享一篇關於20K前端大神面試如何回答ajax跨域問題的詳細介紹，在接觸前端開發起，跨域這個詞就一直以很高的頻率在咱們學習工做中重複出現，最近在工做中遇到了跨域的相關問題，這裏我把它總結記錄一下。

關於跨域，有N種類型，如今我只專一於ajax請求跨域(ajax跨域只是屬於瀏覽器」同源策略」中的一部分,其它的這裏不作介紹)，內容大概以下:

什麼是ajax跨域？如何解決ajax跨域？如何分析ajax跨域？

1、什麼是Ajax跨域

Ajax跨域的原理

ajax出現請求跨域錯誤問題,主要緣由就是由於瀏覽器的「同源策略」。

CORS請求原理

CORS是一個W3C標準，全稱是」跨域資源共享」（Cross-originresourcesharing）。它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

基本上目前全部的瀏覽器都實現了CORS標準,其實目前幾乎全部的瀏覽器ajax請求都是基於CORS機制的,只不過可能平時前端開發人員並不關心而已(因此說其實如今CORS解決方案主要是考慮後臺該如何實現的問題)。

下面是一個簡化版的實現原理圖：

如何判斷是不是簡單請求?

瀏覽器將CORS請求分紅兩類：簡單請求（simplerequest）和非簡單請求（not-so-simplerequest）。只要同時知足如下兩大條件，就屬於簡單請求。

l請求方法是如下三種方法之一：HEAD,GET,POST

lHTTP的頭信息不超出如下幾種字段：

Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type(只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain)

凡是不一樣時知足上面兩個條件，就屬於非簡單請求。

ajax跨域的表現

現象一:No'Access-Control-Allow-Origin'headerispresentontherequestedresource,而且TheresponsehadHTTPstatuscode404

出現這種狀況的緣由以下：

l本次ajax請求是「非簡單請求」,因此請求前會發送一次預檢請求(OPTIONS)

l服務器端後臺接口沒有容許OPTIONS請求,致使沒法找到對應接口地址

解決方案:後端容許options請求。

現象二:No'Access-Control-Allow-Origin'headerispresentontherequestedresource,而且TheresponsehadHTTPstatuscode405

這種狀況下：

l後臺方法容許OPTIONS請求,可是一些配置文件中(如安全配置),阻止了OPTIONS請求,纔會致使這個現象

解決方案:後端關閉對應的安全配置。

現象三:No'Access-Control-Allow-Origin'headerispresentontherequestedresource,而且status200

這種狀況下：

l服務器端後臺容許OPTIONS請求,而且接口也容許OPTIONS請求,可是頭部匹配時出現不匹配現象，好比origin頭部檢查不匹配,好比少了一些頭部的支持(如常見的X-Requested-With頭部),而後服務端就會將response返回給前端,前端檢測到這個後就觸發XHR.onerror,致使前端控制檯報錯

解決方案:後端增長對應的頭部支持。

現象四:headecontainsmultiplevalues','

這種問題出現的主要緣由就是進行跨域配置的人不瞭解原理，致使了重複配置，如：

l常見於.net後臺(通常在web.config中配置了一次origin,而後代碼中又手動添加了一次origin(好比代碼手動設置了返回*))

l常見於.net後臺(在IIS和項目的webconfig中同時設置Origin:*)

解決方案（一一對應）:

建議刪除代碼中手動添加的*，只用項目配置中的便可；

建議刪除IIS下的配置*，只用項目配置中的便可。

2、如何解決ajax跨域

通常ajax跨域解決就是經過JSONP解決或者CORS解決,如如下:(注意，如今已經幾乎不會再使用JSONP了，因此這裏重點介紹CORS)

CORS解決跨域問題

CORS的原理上文中已經介紹了，這裏主要介紹的是，實際項目中，後端應該如何配置以解決問題，這裏是一些常見的後端解決方案:

PHP後臺配置：

PHP後臺得配置幾乎是全部後臺中最爲簡單的,遵循以下步驟便可:

l第一步:配置Php後臺容許跨域

l第二步:配置Apacheweb服務器跨域(httpd.conf中)

原始代碼：

改成如下代碼：

Node.js後臺配置(express框架)：

Node.js的後臺也相對來講比較簡單就能夠進行配置。只需用express以下配置:

JAVA後臺配置：

JAVA後臺配置只須要遵循以下步驟便可:

l第一步:獲取依賴jar包下載cors-filter-1.7.jar,java-property-utils-1.9.jar這兩個庫文件放到lib目錄下。(放到對應項目的webcontent/WEB-INF/lib/下)

l第二步:若是項目用了Maven構建的,請添加以下依賴到pom.xml中:(非maven請忽視)

其中版本應該是最新的穩定版本,CORS過濾器

l第三步:添加CORS配置到項目的Web.xml中(App/WEB-INF/web.xml)

注意：以上配置文件請放到web.xml的前面,做爲第一個filter存在(能夠有多個filter的)

l第四步:可能的安全模塊配置錯誤(注意，某些框架中-譬如公司私人框架，有安全模塊的，有時候這些安全模塊配置會影響跨域配置，這時候能夠先嚐試關閉它們)

NET後臺配置：

.NET後臺配置能夠參考以下步驟:

l第一步:網站配置：

打開控制面板，選擇管理工具,選擇iis;右鍵單擊本身的網站，選擇瀏覽;打開網站所在目錄,用記事本打開web.config文件添加下述配置信息,重啓網站

若是配置仍然出問題,能夠考慮增長更多的headers容許,好比:

l第二步:其它更多配置,若是第一步進行了後,仍然有跨域問題，多是:

l接口中有限制死一些請求類型(好比寫死了POST等)，這時候請去除限制

l接口中，重複配置了Origin:*，請去除便可

lIIS服務器中，重複配置了Origin:*，請去除便可

代理請求方式解決接口跨域問題

注意，因爲接口代理是有代價的，因此這個僅是開發過程當中進行的。

與前面的方法不一樣，前面CORS是後端解決，而這個主要是前端對接口進行代理，也就是:

l前端ajax請求的是本地接口

l本地接口接收到請求後向實際的接口請求數據，而後再將信息返回給前端

l通常用node.js便可代理

關於如何實現代理，這裏就不重點描述了，方法和多，也不難，基本都是基於node.js的。搜索關鍵字node.js,代理請求便可找到一大堆的方案。

3、如何分析ajax跨域

抓包請求數據

第一步固然是得知道咱們的ajax請求發送了什麼數據，接收了什麼，作到這一步並不難，也不須要fiddler等工具，僅基於Chrome便可

lChrome瀏覽器打開對應發生ajax的頁面，F12打開DevTools

l發送ajax請求

l右側面板->NetWork->XHR，而後找到剛纔的ajax請求，點進去

示例一(正常的ajax請求)

上述請求是一個正確的請求，爲了方便，我把每個頭域的意思都代表了，咱們能夠清晰的看到，接口返回的響應頭域中，包括了：

因此瀏覽器接收到響應時，判斷的是正確的請求，天然不會報錯，成功的拿到了響應數據。

示例二(跨域錯誤的ajax請求)

這個請求中，接口Allow裏面沒有包括OPTIONS，因此請求出現了跨域

這個請求中，Access-Control-Allow-Origin:*出現了兩次，致使了跨域配置沒有正確配置，出現了錯誤。更多跨域錯誤基本都是相似的，就是以上三樣沒有知足(Headers,Allow,Origin)，這裏再也不一一贅述。

示例三(與跨域無關的ajax請求)

並非全部的ajax請求錯誤都與跨域有關，因此請不要混淆，好比如下:

好比這個請求，它的跨域配置沒有一點問題，它出錯僅僅是由於request的Accept和response的Content-Type不匹配而已。

基本上都是這樣去分析一個ajax請求，經過Chrome就能夠知道了發送了什麼數據，收到了什麼數據，而後再一一比對就知道問題何在了。

最後，跨域是一個老生常談的話題，網上也有大量跨域的資料，而且有很多精品。慢慢前端路，若是想了解更多的前端知識能夠去咱們扣丁學堂官網進行了解。