在解決問題之前我們先來了解下:
- 目前分爲兩種請求,簡單請求和非簡單請求,因爲瀏覽器對這兩種請求方式的處理方式是不同的。
1. 請求方式爲HEAD、POST 或者 GET;
2. http頭信息不超出一下字段:Accept、Accept-Language 、 Content-Language、 Last-Event-ID、 Content-Type(限於三個值:application/x-www-form-urlencoded、multipart/form-data、text/plain)。
- 跨域,是指瀏覽器不能執行其他網站的腳本。瀏覽器對於JavaScript的同源策略(是指協議,域名,端口都要相同,其中有一個不同都會產生跨域)的限制,例如a.com下面的Js不能調用b.com中的Js,對象或數據(因爲a.com和b.com是不同域)。它是由瀏覽器的同源策略造成的,是瀏覽器對JavaScript實施的安全限制。所以跨域就出現了。
同源策略限制了一下行爲:
1. Cookie、LocalStorage 和 IndexDB 無法讀取;
2.DOM 和 Js 對象無法獲取;
3. Ajax請求發送不出去。
就比如我這裏在測試過程中出現了Charles代理過程中,待測項目的頁面出現了訪問No 'Access-Control-Allow-Origin' header is present on the requested resource的問題。我們從中可以直接看出是請求的頭上缺少響應頭:
- 上面我們瞭解了跨域的問題,在測試過程中,經常遇到前後端分離的情況,前端人員使用了ajax等同源策略的框架,那麼我們在測試中經常使用Charles的Map Local的功能,進行映射本地源(可以是json、txt等文件格式)。
我們又不可能等到前後端都聯調好之後再進行相關的測試。
這裏我們就需要用到Charles的Map Local 或者Map Remote功能。
如下圖的:
- 下面我們來解析怎麼配置Charles對被代理的Web,完成由於跨域原因照成的無法抓取的問題。
一、在Charles的Tools中的Rewrite中配置相關頭規則或者狀態等:
二、添加Rewrite配置,這裏我們需要按照以下步驟進行配置:
三、我們首先需要所有代理的地址進行跨域的抓取、指定、解析等,如下圖:
第四、當我們對location進行指定之後,我們需要對Rewrite的規則進行配置:
這裏我們是用Map Local功能進行本地源重寫,所以我一般是配置Response裏面添加Header ,
當你有其他需求的時候,再在Type中進行相關的其他配置:
第五、正常Options請求的Response Header規則:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,OPTIONS
Access-Control-Allow-Headers: Accept,Origin,X-Requested-With,Content-Type,Last-Modified
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Status:404->200
Access-Control-Request-Method:Origin
以上這些規則就基本包全了目前市面上大部分的頭規則。
第六、其實這是另外一部分,我就偷個懶不想再開篇了,就這裏一起寫吧
開篇我提到Map Local進行本地源的聯調,把不是服務端返回的數據特別是大量的數據,複雜的,甚至是需要上下翻頁的數據來實現下一項的測試。
第七、我們右鍵(Win系統)或者輕觸待調試的URL,在彈窗的最底部有個Map Local選中之後,就會彈出Edit Mapping編輯項。把第六步中我們編輯好的json或者txt文件放置到Local path中。
第八、在經過重定向本地源和跨域之後,我們刷新Web就會看到我們需要創建大量數據或者上下頁才能出現的數據,
開不開心,意不意外?
接下來我們繼續其他測試項吧~~~
注:本文屬於原創,本博客下所有內容,凡註明"來源:laofashi2015"的所有文字、圖片和音視頻資料,版權均屬laofashi2015所有,任何媒體、網站或個人未經本人協議授權不得轉載、鏈接、轉貼或以其他方式複製發佈/發表。已經本人協議授權的媒體、網站,在下載使用時必須註明"稿件來源:laofashi2015",違者本人將依法追究責任。