白嫖 Hoppscotch Proxy 实现请求访问

# Hoppscotch 是啥
[Hoppscotch](https://github.com/hoppscotch/hoppscotch "Hoppscotch") 是类似于 Postman 的开源 API 请求工具。其自带的 Proxy 可以让我们做到意想不到的事情。

![微信截图_20240601114858.png](https://storage.liesauer.net/2024/06/3530419221.png)
![微信图片_20240601114626.png](https://storage.liesauer.net/2024/06/3527769043.png)

# 直接上才艺
```shell
npm i axios lodash.merge
```

### 演示代码
```javascript
axiosWithHoppscotch().get('https://www.google.com/').then(response => {
    console.log(response.data);
});
```
![微信截图_20240601115328.png](https://storage.liesauer.net/2024/06/2500102380.png)

### 核心代码

```javascript
import axios from "axios";
import merge from "lodash.merge";

function axiosWithHoppscotch() {
    const axiosInstance = axios.create({
        transformRequest: axios.defaults.transformRequest,
        transformResponse: axios.defaults.transformResponse,
    });

axiosInstance.interceptors.request.use(config => {
        const raw = {
            lMethod: (config.method + "").toLowerCase(),
            method: (config.method + "").toUpperCase(),
            url: config.url,
            data: config.data,
            headers: structuredClone(config.headers),
        };

config.method = "POST";
        config.url = "https://proxy.hoppscotch.io/";

config.headers = {};
        config.headers["Origin"] = "https://hoppscotch.io";
        config.headers["Referer"] = "https://hoppscotch.io/";
        config.headers["User-Agent"] = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36";

/**
         * 对header进行剥离
         * 并按照优先级进行合并
         */

let rawHeader0;
        let rawHeaders;

rawHeader0 = {};
        rawHeaders = {};

for (const key in raw.headers) {
            const value = raw.headers[key];
            if ((key == "common" || key == "delete" || key == "get" || key == "head" || key == "post" || key == "put" || key == "patch") && value && typeof value == "object") {
                rawHeader0[key] = value;
                continue;
            }

rawHeaders[key] = value;
        }

const headers = merge({}, rawHeader0.common || {}, rawHeader0[raw.lMethod] || {}, rawHeaders);

// header键值对必须是string类型，不然请求会报错
        for (const key in headers) {
            if (typeof headers[key] == 'string') continue;

headers[key] = headers[key] + '';
        }

const data = {
            method: raw.method,
            url: raw.url,
            headers: headers,
            params: {},
            data: raw.data ?? null,
            wantsBinary: false,
            accessToken: "",
        };

const multiPart = raw.method == "POST" && raw.data instanceof FormData;

if (multiPart) {
            config.headers["Content-Type"] = "multipart/form-data";

const guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0,
                    v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });

const multiPartKey = "proxyRequestData-" + guid;

config.headers["Multipart-Part-Key"] = multiPartKey;

const formData = raw.data as FormData;

data.data = "";

formData.set(multiPartKey, JSON.stringify(data));

config.data = formData;
        } else {
            config.headers["Content-Type"] = "application/json";

config.data = JSON.stringify(data);
        }

return config;
    });

axiosInstance.interceptors.response.use(response => {
        const rawData = response.data;

if (rawData.success) {
            response.status = rawData.status;
            response.statusText = rawData.statusText;
            response.data = rawData.data;

response['header0'] = response.headers;

response.headers = rawData.headers;

const isBinary = rawData.isBinary;

if (isBinary) {
                // TODO: decode data
            }
        } else {
            response.status = 400;
            response.statusText = "Bad Request";
            response.data = rawData.data;
        }

return response;
    });

return axiosInstance;
}
```