利用fiddler代理实现Ajax跨域

写在前面

今天在写一个简单的搜索框页面的时候，遇到一个问题。输入的关键字想要获取服务器端（不是我自己的）传来的数据，存在跨域的问题，那怎么办呢，后来通过寻求帮助，得知可以用fiddler代理。当然处理Ajax跨域问题有几种方法，这里我讲这种比较简单，适合实时调试的方法，但不建议作为长远考虑。

背景介绍

跨域，就是跨域名，跨端口，跨协议。
例如：
http://www.a.com/index.html 调用 http://www.a.com/server.php （不算跨域）
http://www.a.com/index.html 调用 http://www.b.com/server.php （跨域，主域名不同：a/b）
http://abc.a.com/index.com 调用 http://def.a.com/server.php （跨域，子域名不同：abc/def）
http://www.a.com:8080/index.html 调用 http://www.a.com:8081/server.php （跨域，端口不同：8080/8081）
http://www.a.com/index.com 调用 https://www.a.com/server.php （跨域，协议不同：http/https）
注意：localhost和127.0.0.1虽然都指本机，但也算跨域

处理跨域之前，输入关键字，没有相应的建议搜索内容

输入框用Ajax调用接口部分代码展示，这里用的是必应给的搜索接口

从上面两张图可见，要调用的接口和本机不在同一个域上，所以接下来要处理这个问题。

具体步骤

fiddler可以对用户的请求和服务器的响应进行修改。我们知道如果我们请求一个服务器上不存在的文件一般是跳转到一个404页面，但是利用该工具就可以实现修改服务器响应的结果，呈现给用户一个自定义的文件——我们只需要拦截服务器的响应并替换成我们自己的页面即可。
fiddler下载地址：http://rj.baidu.com/soft/detail/10963.html?ald

1.设置代理配置

不同浏览器的设置方法不同，Firefox的设置方法如下：

Firefox浏览器

而IE和Chrome是可以直接使用的，我这里用的是Chrome浏览器。

2.拦截服务器的响应并替换成我们自己的页面

由于接口的地址的域是http://api.bing.com，所以我们就自己请求一个地址（这个是可以随意设置的，只要域匹配即可，建议后面部分用你的文档名称）：http://api.bing.com/search-page.html ，由于search-page.html在服务器根本不存在，所以会报404错误。在Fiddler中我们捕获到了这个响应：

由于我的页面还用到了一些图片和其他文件，所以按照同样的方法将错误响应改为我们本地的文件：

到这里，我们就解决了跨域的问题了，刷新我们一开始请求的网址： http://api.bing.com/search-page.html（你们打开看不见，因为你们的电脑没有设置代理，自己可以动手试试）。发现可以用正常调用必应接口的数据了。

可以看到，和必应的搜索建议是一致的，调用成功了。

心得体会

作为一个没有后台相关知识的小白，最初遇到这个问题时挺苦恼的，通过fiddler代理成功实现Ajax跨域，我的搜索建议功能终于实现了。在这里记录一下同时也分享给有需要的人。