导航：首页 > 服务器 >

静态网站如何利用云函数SCF + API网关访问自定义后端接口

发表于：2026-11-01 作者：千家信息网编辑

千家信息网最后更新 2026年11月01日，静态网站如何利用云函数SCF + API网关访问自定义后端接口，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。小编介绍使用全静态页面的网站

千家信息网最后更新 2026年11月01日静态网站如何利用云函数SCF + API网关访问自定义后端接口

静态网站如何利用云函数SCF + API网关访问自定义后端接口，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

小编介绍使用全静态页面的网站如何利用SCF+API 服务实现简单的后端接口，并提供了一个 Python 出题器的实例演示。

创建云函数 SCF

照着这个文档云函数快速入门按里面的步骤来创建自己业务函数。第一次可以选择使用控制台创建函数，运行环境中选择自己熟悉的编程语言，当前支持 python, php, golang, java, nodejs 几种，然后就可以在函数代码下愉快的开始了。这里以运行环境 Python3.6 为例。默认的入口函数是 index.main_handler，有两个输入参数:

event：可以获取触发源的消息 - 主要用来获取传入参数。
context：可以获取本函数的环境及配置信息。

不清楚参数里有什么的，或怎么用的，可以直接打印出来看看，都是 dict 类型，一目了然。建议加上传入参数检查和限制，毕竟我们不知道调用接口的人会传些什么奇怪的东西。返回类型包装成 json 格式，对前端调用更友好。给出改好的代码????：

# -*- coding: utf8 -*-import sys, getopt, randomimport jsondef main_handler(event, context):    print("Received event: %s" % event)    print("Received context: %s" % context)    params = event["queryString"]    return auto_cal_generator(int(params["limit"]), int(params["op_count"]), params["op_type"].split(","), int(params["total"]))def auto_cal_generator(limit=100, op_count=1, op_type=["+"], total=100):    if limit>999 or op_count>9 or total>99:        return "exceed max input limit"    res = {}    res["msg"] = "Here are today's %d works, good luck!" % total    questions = []    l = len(op_type)-1    for j in range(0, total):        up = limit        question = ""        for i in range(0, op_count+1):            num = 0            if i == 0:                num = random.randint(1,max(1,min(limit,up)))                question = "%s%d" % (question, num)                up -= num                continue            op = "+"            if limit - up > 0:                op_i = random.randint(0,l)                op = op_type[op_i]            question = "%s%s" % (question, op)            if op =="+":                num = random.randint(1,max(1,min(limit,up)))                up -= num            elif op == "-":                num = random.randint(1,max(limit-up, 1))                up += num            else:                print("operator error: %s" % op)                sys.exit(1)            question = "%s%d" % (question, num)        questions.append("%d: %s=" % (j+1, question))    res["questions"] = questions    return json.dumps(res)

写完 code 后当然不能忘了最重要的测试工作，代码输入框下就是测试的入口，需要创建测试模板。系统已经预置了好几种模板类型，直接拿来改成你需要的就好。我们用 API Gateway 事件模板为原型修改刚写好的出题器的测试模板。由于我们 code 获取的是 event 里的 queryString，这里只用修改里面的 queryString 这块：

"queryString": {  "op\_type" : "+,-",  "op\_count" : 2,  "limit":100,  "total":10 },

创建完测试模板后，点击左侧测试，瞬间返回结果：

返回结果"{\"msg\": \"Here are today's 10 works, good luck!\", \"questions\": \"1: 76-4-44=\", \"2: 52-42+67=\", \"3: 95+4-50=\", \"4: 84-78-1=\", \"5: 29-20-9=\", \"6: 19+37+38=\", \"7: 93-53+57=\", \"8: 80+7+7=\", \"9: 90-74-11=\", \"10: 7+34+52=\"}"

结果下方还有执行摘要和执行日志，方便调试。

创建 API Gateway

云函数 SCF 写完后，如果想要能通过网络 http(s) 请求直接访问，就要为其添加触发方式为 API 网关触发器。同时强烈建议将鉴权方法置为 API 网关密钥对。然后就会在 API Gateway 下自动创建出一个对应的 service API。这一步如果遇到权限问题无法自动创建 API 的话，也不要着急，可以直接在 API gateway 的控制台操作。

参考：API 网关快速入门。

创建 API 时注意将鉴权类型改成密钥对。下方有个支持CORS的选项，如果需要跨域访问就勾上，反之可以忽略。设置完需要接收的参数后，在下一步的后端配置中选后端类型为 cloud function 后，选中刚建好的云函数，就做好了这两者的关联。

建好 API 后，来到对应服务下的管理 API 标签就能看到刚建好的 API。在列表的右侧有调试入口，千万不要忘了点进去做下测试。测试完成后，再到服务页完成发布，这样 API 就可以被访问到了。

访问控制

然后，就来到了相当重要但也容易被忽略的访问控制这步。在前面我们已经选择了密钥对的方式作为鉴权类型。虽然有密钥泄露的风险，但对于小网站来说这个验证也是足够了，记得保存好密钥并定期修改就好。

之后的步骤就是创建密钥对，创建使用计划绑定密钥对，再把使用计划绑定服务或 API。下面直接甩出文档：使用计划。使用计划中除了可以绑定密钥对，还可以进行流量控制，可按需设置。

前端调用

配置完后端服务后，要解决的就是访问的问题了。由于没钱供服务器，用的是静态页面托管的方式建的站。前端直接 ajax 访问 API 来获取结果。参考文档在此：密钥对认证，如何生成签名（里面给出了用不同语言生成签名的例子）。

由于没写前端好多年，对前端的认知还停留在 js 和 jquery 阶段，这里只能给出改好的 jquery 写法。用的是 crypto-js 加密。

//function getHeader(){        var nowDate = new Date();        var dateTime = nowDate.toGMTString();        var SecretId = '****';        var SecretKey = '****';        var source = 'your_source';        var auth = "hmac id=\"" + SecretId + "\", algorithm=\"hmac-sha1\", headers=\"x-date source\", signature=\"";        var signStr = "x-date: " + dateTime + "\n" + "source: " + source;        var sign = CryptoJS.HmacSHA1(signStr, SecretKey)        sign = CryptoJS.enc.Base64.stringify(sign)        sign = auth + sign + "\""        var header = {"Source": source , "X-Date": dateTime , "Authorization":sign}        return header}function getQ(){        $.ajax({                url: "https://xxxx/xx",                type: "get",                data:{                        "op_count" : 1,                        "op_type" : "+,-",                        "limit" : 100,                        "total" : 10                },                dataType: "json",                crossDomain: true,                headers: getHeader(),                success: function (data) {                        if (data.errorCode < 0){                                //deal function error: data.errorMessage                                return                        }                        data= $.parseJSON(data);                        //show result in page                },                error: function(jqXHR, textStatus, errorThrown){                        //deal api error                }        })}

如果在前面创建 API gateway 的 service 时候没有指定自定义域名，或是自定义域名和调用页面的域名不是同一个，就会涉及到跨域的问题。解决跨域问题传统的方法可以用 jsonp。但它没办法在 request 的 Header 里加参数，也就传不了鉴权所需的字段。所以这里只能用 CORS 来解决跨域：

对于服务端，只要前面建 API 的时候勾选了支持 CORS 选项，就会自动开启，参考 API 控制台相关问题。对于客户端，在 ajax 参数中设置 crossDomain: true 就可以了。