虎牙开放平台文档

前言 Q&A

在之前, 开发者使用 hyExt.request 执行网络请求, 需要您的服务首先支持公网环境可以访问,并且该request请求会经过小程序进行代理转发, 但是在开发调试阶段, 我们往往不需要将我们的服务部署到公网环境。

为此,在最新版本的SDK更新中,我们对 hyExt.request 新增了一个 isDirect 字段, 在开发环境，升级最新的SDK后(您也可以直接设置如下图), 通过设置该字段为true(查看文档demo例子)，便可直接访问您的服务。

但是, 因为主站 CSP Content-Security-Policy 策略问题，对直接发起的请求会做限制。因此小程序开发环境调试request,若不走代理，需要自己设置一个本地服务。

该服务需要满足以下条件

本地需要有 https 证书
127.0.0.1 host 需要绑定一个 *.huya.com 域名如(devlocal.huya.com)
在nginx 层面进行跨域设置

配置本地服务

如何配置本地服务，下面我们会分别以 Windows 和 MacOs 环境介绍每一步如何操作。

Windows 环境

以下，以windows 环境为例，简单介绍配置本地服务操作过程:

一、生成本地https证书

生成https证书这里，我们选择mkcert这个工具。安装mkcert: 下载完成exe文件后，将下载好的文件如这里下载的是 mkcert-v1.4.1-windows-amd64.exe 命名为 mkcert.exe 然后存放到C:\Windows\System32

mkcert

设置mkcert为本地CA, 用Administrator 打开 cmd 窗口，执行 mkcert -install

mkcert-install

生成证书给 www.example.com 生成证书，这里以 devlocal.huya.com 为例,生成了该域名和通配域名和ip映射的证书：

mkcert devlocal.huya.com *.huya.com 127.0.0.1

mkcert-ssl

至此，我们生成了devlocal.huya.com+2.pem & devlocal.huya.com+2-key.pem 以本地 127.0.0.1为ip，devlocal.huya.com 做域名的 ssl 证书文件.

二、nginx代理设置

在nginx 官网下载 nginx 文件，我们选择 nginx/Windows-1.19.1 版本

nginx

配置nginx ssl支持，打开 conf 文件夹下 nginx.conf 文件,将上一步生成的两个证书文件拖拽到该conf目录下，修改 http 下的配置，在这里我们顺便对接下来的node 服务做了映射配置

    # HTTPS server
    #
    server {
        # 设置为https默认的443端口&配置server域名与ip& ssl证书文件引入
        listen       443 ssl;
        server_name  localhost 127.0.0.1 devlocal.huya.com;
        ssl_certificate      devlocal.huya.com+2.pem;
        ssl_certificate_key  devlocal.huya.com+2-key.pem;

       location / {
        #    root   html;
        #    index  index.html index.htm;

        # 这里我们映射到文档demo node代理服务器，可以是ip加端口,或url 这里您也可以映射到您自己的服务器
        proxy_pass       http://127.0.0.1:8090;
        proxy_set_header Host      $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }
    }

nginx-ssl

nginx层面配置跨域设置, 在 nginx.conf 文件内 http 处如下配置

http {
    ........
    ........
    ........
    # 跨域相关设置
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header Access-Control-Allow-Headers 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header Access-Control-Allow-Methods 'GET,HEAD,OPTIONS,POST,PUT';

    server {
      ........
      ........
      ........
    }
     client_max_body_size 50m;
     client_body_buffer_size 60k;
     ........
     ........
     ........
}

nginx-cors

4.关闭nginx并重启

在这一步，我们完成了nginx配置 ssl证书和端口、跨域设置、node 服务映射。若觉得上述nginx配置过于繁琐，我们也可以直接采用PhpStudy 等辅助工具进行配置。

nginx-phpstudy

MacOS 环境

以下，以 MacOS 环境为例，简单介绍配置本地服务操作过程(mac 环境没有合适的截屏工具，这里以截图形式呈现):

一、生成本地https证书

生成本地证书, 在 MacOS, 我们只需通过 Homebrew进行安装即可

brew install mkcert # 安装 mkcert 若您默认是火狐浏览器则还需执行一句 brew install nss

mkcert -install # 设置mkcert为本地CA

mkcert devlocal.huya.com *.huya.com 127.0.0.1 # 生成HTTPS证书

执行完上述步骤，即可在同级目录下，一般为根目录生成相应的证书文件。

二、配置Nginx代理

安装Nginx, 安装完成nginx 默认路径为 /usr/local/Cellar/nginx/x.xx.x/bin/ 目录，您可以在Finder文件下,使用 command + shift + G, 在弹出搜索框输入 /usr/local 即可打开。

brew install nginx

安装完毕，并进入 bin 目录后，打开nginx可执行文件,如果在浏览器能够访问localhost:8080则已经安装成功了。

配置 nginx ssl端口，证书文件、代理设置、跨域设置。

切换至配置文件所在路径

cd /usr/local/etc/nginx # 或采用上述步骤相同方法打开

修改配置文件 nginx.conf 并将相应证书文件放置在同级目录下

您可以直接用编辑器或vim等工具打开该文件，将上述windows环境下相同配置设置到该文件对应位置。

查看修改后的配置是否正确

nginx -t

重启nginx

nginx -s reload

在设置好host的情况下，运行下一步骤的node服务，在浏览器中输入 https://devlocal.huya.com/ 若有数据返回则说明本地配置服务设置完毕。

绑定host

在switchhost 或 windows host文件内配置

127.0.0.1 devlocal.huya.com

本地 node 服务

上述步骤完成后，我们成功的设置了本地host的https配置，接下来，我们将通过一个创建一个简单的node后台服务和demo小程序，验证我们的 request isDirect 字段设置，是否能成功访问本地服务。

本地新建一个node工程文件夹，并在server写如下设置

const http = require('http');
const PORT = 8090;
const server = http.createServer((req, res) => {
    console.log(`请求源 origin： `, req.headers.origin);

    res.setHeader('Content-type', 'application/json')
    res.end(`{ "status": 0, "data": "ok" }`)
    res.end();
    return;
  })
  server.listen(PORT)
  console.log('node-server started at port http://localhost:' + 8090)

这一步您也可以采用自己部署的服务器，在nginx层做映射

demo小程序验证request走代理字段

新建小程序工程，并在app.js写下述测试代码

import { UI } from '@hyext/hy-ui'
import React, { Component } from 'react'
import './app.hycss'
const { View, Text } = UI

class App extends Component {
  constructor (props) {
    super(props)
    this.state = { msg: '调用ing...' }
  }

  componentDidMount () {
    global.hyExt.request({
      method: 'GET',
      url: 'https://devlocal.huya.com/',
      isDirect: true   // hyExt.request新增`isDirect`字段,置为true 可在开发环境访问本地服务
    }).then(rsp => {
      this.setState({ msg: '调用成功：' + JSON.stringify(rsp) })
    }, e => {
      this.setState({ msg: '调用失败：' + e.message })
    })
  }

  render () {
    return (
      <View className='container'><Text numberOfLines={0}>{this.state.msg}</Text></View>
    )
  }
}
export default App

验证request 不走代理字段是否有效

打开小程序面板查看接口请求返回，在控制台查看是否有 devlocal.huya.com 域名的请求和返回

前言 Q&A

配置本地服务

Windows 环境

一、生成本地https证书

二、nginx代理设置

MacOS 环境

一、生成本地https证书

二、配置Nginx代理

绑定host

本地 node 服务

demo小程序验证request走代理字段

验证request 不走代理字段是否有效

参考文献