# use Axios Combined with WeChat Security Gateway

# Access Guide

in HTML Introducing a Security Gateway Web SDK

<script src="https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com /sdk/2.1.0/cloud.js" importance="VeryHigh"></script>

Create a new wxadapter.js File, which reads as follows, modify the GATEWAY_DOMAIN Field for its own gateway domain name, and the resoureceAppid (Fill in any of the Mini Program white list appid It is only used as a source, not verified.

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-wxc0dc4e681cfac36 f.sh.wxcloudrun .com  // Gateway access node domain name

const c1 = new window.cloud.Cloud({
  identityless: true,
  resourceAppid: 'wx069a87eae381af2b',  // Appid, fill in the access Mini Program appid
  config: {
    customDomain: `https://${GATEWAY_DOMAIN}`,
  },
})
c1.init() // Initialization instance

const gateway = c1.services.Gateway({
  domain: GATEWAY_DOMAIN,
}) // Gateway access node domain name, does not contain protocol header

const wxadapter = (config) =>
  new Promise((resolve, reject) => {
    let { url, ...resolved } = resolveConfig(config)
    gateway
      .call({
        ...resolved,
        path: 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(
        // Downgraded to Ordinary fetch request
        (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

At the entrance js Introduced above. adapter：

import axios from 'axios'
import wxadapter from './wxadapter'
// Applied to the default axios Example
axios.defaults.adapter = wxadapter
const fallback = false // Configure whether to downgrade false Failure to take the downgrade retry link, true Downgrade by default
// It is also possible to use independent axios Example
if(!fallback){
    axios.create({
    // ...config
    adapter: wxadapter
    })
}else{
    axios.create({
    // ...config
    })
}

It is enough to test whether the request is normal, and whether it is encrypted. Be careful 2.0.4 of SDK Not allowed to open DevTools Debugging tool, or it will be intercepted.

# FAQ

Degradation capability, can you customize

A: You can go through the above wxadapter of catch Partially customize the conditions for entering the demotion.

How to Close Fast

A: Steps 3 Cancel the entrance. adapter The application can be.

Does it support server active downgrade?

A: In the above code, any error will be degraded by default, or you can turn off the gateway's Web Access capability forces all requests to downgrade.

Lower version (0.27.2) A x iOS. How to use

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-wxc0dc4e681cfac36 f.sh.wxcloudrun .com 

const c1 = new window.cloud.Cloud({
  identityless: true,
  resourceAppid: 'wx069a87eae381af2b',  // Appid, fill in the access Mini Program appid
  config: {
    customDomain: `https://${GATEWAY_DOMAIN}`, // Gateway access node domain name
  },
})
c1.init() // Initialization instance

const gateway = c1.services.Gateway({
  domain: GATEWAY_DOMAIN,
}) // Gateway access node domain name, does not contain protocol header

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,
        path: 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(
        // Downgraded to Ordinary xhr request
        (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