今天在调试本地页面的时候遇到了一个问题，在本地调试页面，如果访问服务器的接口就会遇到跨域的问题。当在pc端调试本地页面的时候，使用浏览器插件allow-control-allow-origin就可以解决跨域的问题。但是如果是用手机端来调试页面的话，手机端没有解决跨域的插件，那应该怎么解决这个问题呢？经过同事的指导，我基本解决了手机跨域的问题，总结出来以便未来使用。
解决手机跨域的问题，是通过Charles这个软件，通过把手机的访问请求通过本地pc来代理，来解决跨域的问题。大概思路是这个样子，下面我来把过程简单总结一下。
首先，我们应该设置一下手机的代理，一般都是在wifi链接的位置进行代理的设置，主机名填写本地pc端的ip地址，通过ifconfig指令来查看ip地址，可以看到我的ip地址为 172.100.108.94 ，端口号Charles默认为8888，设置好之后，打开Charles，弹出一个对话框选择allow，我们就可以通过Charles的代理来连接网络了。
这样我们通过代理，就等于使用本地的pc端来访问页面了，但是我们在访问服务器接口的时候，因为没有解决跨域的浏览器插件，我们还是不可以访问服务器的接口。
以我实际操作来举例子，我需要访问的是 api.haojin.in/shop_list这个接口，我使用手机通过代理后，我的ip变成了本地pc端的ip，但是还是跨域无法访问服务器的接口。
我如果需要访问成功必须保证我的域名和服务器的一致，这样才可以访问。
所以，我改了访问接口的js文件，原本js中接口为api.haojin.in/shop_list ， 我改为我本地的ip加上接口名 http://172.100.108.94:63341/shop_list 这里需要注意，如果你使用的不是默认端口的话，你需要把端口号也加上。
这样我们通过代理，来访问接口时，就保证了我们是在同一个域当中，但是我们本地不存在这样一个接口，所以访问这个接口的时候时出错的。
所以我们再通过Charles的map remote功能，map remote的功能就是把一个请求重定向到另一个地址上面，这样我们只要把 http://172.100.108.94:63341/shop_list 重定向到 api.haojin.in/shop_list 我们就可以成功的访问到服务器的接口了。
所以我们在Charles中找到tools中的map remote选项，如下图所示。
点击add（添加）我们就可以增加一条重定向。在弹出的界面中我们就可以设置我们需要的参数了。如下图。
上面一栏就是我们原本的请求，填写协议，域名，端口号，路径等参数就可以了。下面一栏就是我们需要重定向到的地址，可以看到端口号没有填，他默认是80端口。
点击ok保存后，我们就可以成功的访问到服务器的接口了。这样我们就解决了手机调试本地页面时的跨域问题。
通过抓包查看，我们可以看到通过手机已经可以成功的访问到服务器的接口。
但是这种方法也有很多不足的地方，比如：第一，我们这样设置只能访问指定的一个接口，当有多个接口时，我们必须把每个接口依次设置一遍，这本身也很浪费时间。第二，我们需要更改本地js文件当中的接口，当完成本地调试如果需要上线的时候，还需要把本地的js文件改回去，这样在来回更改的过程中可能出现错误。第三，这样更改之后我们通过手机访问时没有问题，但是pc端访问时因为没有通过代理，pc端的页面就不能访问到服务器的接口了，这样也会造成麻烦，pc端和手机端无法一起调试，除非pc端也通过代理来访问服务器接口。
以上就是我这次遇到问题时的解决办法，虽然可能这个解决办法不是最好的，但起码他可以解决这个问题，我也会继续在网上寻找更好的解决办法，希望可以更加简单和优雅的解决这个问题。