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請求的包就能夠抓到了。