# Web & H5 使用安全网关

本文介绍如何在 WEB 应用中接入微信安全网关。

需要注意：WEB 应用接入仅支持基础版套餐及以上使用。

# 一、接入步骤

# 1. 微信扫码登录 Donut 安全网关控制台，同意安全网关服务协议并同意即完成开通。在「安全网关-业务配置」页面，点击添加业务，开始配置。

# 2. 添加业务页面，选择业务类型为「Web」，随后填写业务名称（自行填写）和源站域名（你预期要保护的域名）。

# 3. 在你自己的 web 应用中，引入安全网关 Web SDK

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

<!-- 下面是 eruda 调试工具，仅供开发时使用，上线前需删除 -->
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

注意 2.0.3 版本以上的 SDK 不再允许打开 DevTools 调试工具，否则请求将被拦截。可以使用 eruda 等调试工具查看 console 日志

# 4. 初始化网关对象和实例

const c1 = new cloud.Cloud({
  identityless: true,
  resourceAppid: 'wx069a87eae381af2b', // appid，填入接入的小程序 appid
  config: {
    customDomain: 'https://a224faf18-wx66e29c62636ff9e5.preview.wxcloudrun.com' // 网关接入节点域名,需要完整填入
  }
})
c1.init() // 初始化实例

const gateway = c1.services.Gateway({ domain: 'a224faf18-wx66e29c62636ff9e5.preview.wxcloudrun.com' }) // 网关接入节点域名，不包含协议头

# 5. 请求网关地址

gateway.call({
path: 'https://httpbin.org/post',
    header:{
      'X-WX-HTTP-MODE': 'REROUTE', // 必填
      'Content-Type':'application/json'
    },
method: 'post',
    data: { foo: 'bar' }
}).then(res => {
    console.log(res) // 网关返回结果
})

# 二、能力拓展

安全网关支持 H5 结合不同的请求库，可参考如下文档

使用 Axios 结合微信安全网关

hook xhr 结合微信安全网关