解决Charles 关于跨域以及No Access-Control-Allow-Origin header is present on the requested resource 的问题javascriptlaofashi2015的专栏-

在解决问题之前我们先来了解下：

• 目前分为两种请求，简单请求和非简单请求，因为浏览器对这两种请求方式的处理方式是不同的。

       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″，违者本人将依法追究责任。