在解決問題之前我們先來了解下：
- 目前分爲兩種請求，簡單請求和非簡單請求，因爲瀏覽器對這兩種請求方式的處理方式是不同的。
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"，違者本人將依法追究責任。