# Axios access WeChat gateway

# I. Access guidelines

# 1. Introduction of the WeChat Gateway Web SDK in HTML

<script src="https://该地址隐藏，请前往控制台获取/cloud.js" importance="VeryHigh"></script>

# 2. Create a new`wxadapter.js]]`file that reads as follows, and modify the`GATEWAY_DOMAIN]]`field to be your own gateway domain, and`` resoureceAppid`（Fill in any Weixin Mini Program whitelist`AppID`[[TAG-3 END]].

import { AxiosHeaders } from 'axios';
import settle from 'axios/unsafe/core/settle';
import fetchAdapter from 'axios/unsafe/adapters/fetch';
import resolveConfig from 'axios/unsafe/helpers/resolveConfig.js';

const GATEWAY_DOMAIN = 'a2691ef24-wxc0dc4e681cfac36f.sh.wxcloudrun.com' // 网关接入节点域名

const c1 = new window.cloud.Cloud({
  identityless: true,
  resourceAppid: 'wx069a87eae381af2b', // appid，填入接入的小程序 appid
  config: {
    customDomain: `https://${GATEWAY_DOMAIN}`,
  },
});
c1.init(); // 初始化实例

const gateway = c1.services.Gateway({
  domain: GATEWAY_DOMAIN,
}); // 网关接入节点域名，不包含协议头

const wxadapter = (config) =>
  new Promise((resolve, reject) => {
    let { url, ...resolved } = resolveConfig(config)
    gateway
      .call({
        ...resolved,
        url,
        header: {
          'X-WX-HTTP-MODE': 'REROUTE',
          ...config.headers,
        },
      })
      .then((result) => {
        const headers = new AxiosHeaders(result.header);
        const response = {
          config,
          data: result.data,
          headers,
          status: result.statusCode,
          statusText: result.errMsg ?? 'OK',
          cookies: result.cookies,
        };
        settle(resolve, reject, response);
      })
      .catch(
        // 降级为普通 fetch 请求
        (error) => {
          console.log(
            error,
            'error when using wx gateway, using fetch adapter to fallback'
          );
          return fetchAdapter(config).then((result) => {
            const response = result;
            settle(resolve, reject, response);
          }).catch(reject);
        }
      );
  });

export default wxadapter;

# 3. Introduce the`adapter`above at the entry js:

import axios from 'axios';
import wxadapter from './wxadapter';
// Applied to the default axios instance
axios.defaults.adapter = wxadapter;
const fallback = false; // 配置是否降级 false 为不降级，失败走降级重试链路，true 为默认降级
// You can also use a standalone instance of axios
if(!fallback){
    axios.create({
    // ...config
    adapter: wxadapter
    });
}else{
    axios.create({
    // ...config
    });
}

# 4. Just test whether the request is normal and whether the requests are encrypted. Note that the SDK for 2.0.4 does not allow the DevTools debugging tool to be opened, otherwise it will be intercepted.

# II. FAQ

# 1. The de-escalation ability, can it be customized?

A: You can customize the conditions for entering the downgrade via the catch section of the wxadapter above.

# 2. How to close it quickly

A: Step 3: Cancel the application of the adapter at the entrance.

# 3. Does the service side support proactive downgrading?

A: In the above code, by default any error will be degraded, or you can force all requests to be degraded by shutting down the gateway's web access capability by the console.

# 4. Low Version (0.27.2) How Axios Uses

import xhrAdapter from 'axios/lib/adapters/xhr';
import settle from 'axios/lib/core/settle';
import buildFullPath from 'axios/lib/core/buildFullPath';
import buildURL from 'axios/lib/helpers/buildURL';

const GATEWAY_DOMAIN = 'a2691ef24-wxc0dc4e681cfac36f.sh.wxcloudrun.com';

const c1 = new window.cloud.Cloud({
  identityless: true,
  resourceAppid: 'wx069a87eae381af2b', // appid，填入接入的小程序 appid
  config: {
    customDomain: `https://${GATEWAY_DOMAIN}`, // 网关接入节点域名
  },
});
c1.init(); // 初始化实例

const gateway = c1.services.Gateway({
  domain: GATEWAY_DOMAIN,
}); // 网关接入节点域名，不包含协议头

const wxadapter = (config) =>
  new Promise((resolve, reject) => {
    var fullPath = buildFullPath(config.baseURL, config.url);
    var url = buildURL(fullPath, config.params, config.paramsSerializer);
    gateway
      .call({
        ...config,
        url,
        header: {
          'X-WX-HTTP-MODE': 'REROUTE',
          ...config.headers,
        },
      })
      .then((result) => {
        const headers = result.header;
        const response = {
          config,
          data: result.data,
          headers,
          status: result.statusCode,
          statusText: result.errMsg ?? 'OK',
          cookies: result.cookies,
        };
        settle(resolve, reject, response);
      })
      .catch(
        // 降级为普通 xhr 请求
        (error) => {
          console.log(
            error,
            'error when using wx gateway, using fetch adapter to fallback'
          );
          return xhrAdapter(config).then((result) => {
            const response = result;
            settle(resolve, reject, response);
          });
        }
      );
  });

export default wxadapter;

# 5. How to pass cookies

If you need to pass cookies, you can set the cookie field in the header

header: {
  'X-WX-HTTP-MODE': 'REROUTE',
  ...config.headers
  Cookie: document.cookie
}

The gateway SDK cannot pass HttpOnly cookies.