charles 基本操作

http-proxy-middleware

说到项目中解决跨域的方法，不得不提一下这个工具
代理 /api 请求在 http://www.example.org 主机名下。可以这样配置：

var express = require('express');
var proxy = require('http-proxy-middleware');

var app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);
// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

假如我们本地服务在192.168.0.112上，如上配置后，请求192.168.0.112：8080/api就会通过中间件请求到www.example.org/api这个接口，从而解决跨域问题，也就可以不用charles了（这个软件跑起来太浪费内存了），但如果想要抓包、打接口断点、修改接口数据等操作，还是需要强大的charles的。
在通过Vue脚手架构建的项目中，webpack-dev-server是已经被加到项目中了，

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    // host:ip.address(),
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable, //代理设置
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  }

通过config/index.js中可以配置proxyTable这个选项。其参数和http-proxy-middleware是一致的。

charles用途

charles是工作中常用的一个工具，在移动端开发中，它的用途主要是：1.网络访问代理服务器，使得所有的网络访问请求都通过它来完成，解决在接口调试过程中的跨域问题；2.截取http和https的网络封包

操作

• Proxy->Proxy Setting

这里设置的代理的端口，设置完后，在手机上添加HTTP代理，ip为电脑ip地址

• tools->map Remote

这里是设置网络请求重定向到另一个网址请求地址，进而可以解决跨域的问题。From中的IP和端口就是本地起的服务的ip和端口，而To的地址就是接口的地址。

• Http请求抓包可以轻易的捕获到，但Https需要安装ssl证书。Help->ssl Proxying->install

这一步是给电脑安装证书

然后信任此证书

手机和电脑需在同一个网段，手机设置HTTP代理后，用浏览器访问chls.pro/ssl 安装证书

然后选择help-sslProxying->install charles Root Certificate on a Mobile

设置好了，然后设置要抓的https的请求，端口一般就写*

手机设置-通用-信任下载的Charles代理

设置->通用-关于本机-证书信任设置开关打开

手机上https请求的包就可以抓到了。