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