静态HTML/JS托管站点实现REST风格JSON接口的技术问询

因为你的站点仅支持托管静态HTML/JS文件，无法使用后端框架，只能通过前端JS在HTML文件中动态判断请求路径/参数，输出JSON内容来模拟API接口。

核心思路 #

用一个入口HTML文件作为所有API请求的目标，通过JavaScript检测当前请求的URL路径或查询参数，动态生成JSON响应并输出到页面，同时修改文档的内容类型标识。

实现方案1：按URL路径匹配接口 #

创建一个api.html文件，内容如下：

<!DOCTYPE html>
<html>
<head>
    <script>
        // 获取当前请求的路径
        const requestPath = window.location.pathname;
        let responseData = {};

        // 匹配不同的API端点
        switch(requestPath) {
            case '/getObject':
                responseData = {"key1": "value1", "key2": "value2"};
                break;
            case '/postDemo':
                // 处理POST请求（通过FormData或URL参数传递数据）
                if(window.location.method === 'POST') {
                    const formData = new FormData(document.querySelector('form'));
                    responseData = {"status": "success", "received": Object.fromEntries(formData)};
                } else {
                    responseData = {"error": "仅支持POST请求"};
                }
                break;
            default:
                responseData = {"error": "无效的API端点"};
        }

        // 设置文档类型为JSON并输出数据
        document.contentType = 'application/json';
        document.body.textContent = JSON.stringify(responseData);
    </script>
</head>
<body></body>
</html>

配套设置（可选） #

如果你的托管平台支持URL重写规则，可配置将所有API路径（如/getObject、/postDemo）重写到api.html，这样用户可以直接访问myFakeApiSite.com/getObject，而非myFakeApiSite.com/api.html/getObject。

实现方案2：按URL查询参数匹配接口 #

如果托管平台不支持URL重写，可通过查询参数区分接口，创建api.html文件如下：

<!DOCTYPE html>
<html>
<head>
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const action = urlParams.get('action');
        let responseData = {};

        // 根据action参数返回对应数据
        if(action === 'getObject') {
            responseData = {"key1": "value1", "key2": "value2"};
        } else if(action === 'createItem') {
            const itemName = urlParams.get('name');
            responseData = {"status": "created", "item": itemName};
        } else {
            responseData = {"error": "未知的操作类型"};
        }

        document.contentType = 'application/json';
        document.body.textContent = JSON.stringify(responseData);
    </script>
</head>
<body></body>
</html>

使用时直接访问：myFakeApiSite.com/api.html?action=getObject

注意事项 #

• 服务器实际返回的Content-Type仍是text/html，但大部分HTTP客户端（如fetch、axios）可正常解析输出的JSON内容，也可在请求时手动指定responseType: 'json'强制解析。
• 静态站点无法实现真正的服务器端数据持久化，若需存储数据只能使用客户端的localStorage，但数据仅对当前用户有效，无法实现多用户共享。
• POST请求的处理受限，无法读取服务器端的请求体，只能通过FormData或URL参数传递数据，使用URL参数时数据会暴露在地址栏中。

内容的提问来源于stack exchange，提问作者HarKatt