Heroku 获取请求在生产中返回 html 代码 - JavaScript

在开发过程中，我们经常需要向服务器发送请求获取数据或者资源。然而，当我们把项目部署到 Heroku（一款强大的云平台）时，我们可能会遇到一些问题，其中之一就是 Heroku 在生产环境中返回的响应会被转换为 HTML 代码而不是 JSON 格式。这可能会导致我们的前端代码无法正确解析响应数据。本文将介绍如何在 JavaScript 中处理这种情况。

问题描述

当我们使用 Heroku 进行部署时，由于 Heroku 默认使用的是实时日志记录，因此在获取响应时会出现一种非常奇怪的情况：我们原本期望返回的 JSON 数据会被格式化为 HTML 代码，然后在浏览器中显示出来。这会导致我们的前端代码无法正确解析响应数据，从而导致错误。

解决方法

1. 使用 axios 库

我们可以使用 axios 库作为 HTTP 客户端，在请求时将响应数据强制转换为 JSON 格式。可以配置一下请求头：

const axios = require('axios');

// 发送请求时只允许 JSON 响应
axios.defaults.headers.common = {
    'Accept': 'application/json, text/plain, */*'
};

在使用 axios 发送请求时，我们可以直接向 Heroku 应用发送 GET 请求：

axios.get('https://your-heroku-app.herokuapp.com/api/data')
    .then(response => {
        console.log(response.data); // 在控制台中打印 JSON 数据
    })
    .catch(error => {
        console.error(error);
    });

在获得响应时，response.data 将会自动被解析为 JSON 对象。如果想把 JSON 直接传给页面展示，可以修改一下请求头：

// 发送请求时只允许 JSON 响应，可以省略 Headers
axios.get('https://your-heroku-app.herokuapp.com/api/data', {
    headers: { 'Accept': 'application/json' }
}).then(response => {
    document.querySelector('#json-response').innerHTML = JSON.stringify(response.data);
}).catch(error => {
    console.error(error);
});

2. 手动解析 HTML 响应

如果我们不想使用第三方库，我们可以手动解析 HTML 响应以获得 JSON 数据。在请求响应的头部信息中，我们可以找到 Content-Type 字段，这个字段指定了响应的 MIME 类型，可以告诉我们服务器返回的是 HTML 还是 JSON。根据这个信息，我们可以手动解析响应。需要用到一个额外的库 cheerio，这是一个 Node.js 的 DOM 解析模块。

const cheerio = require('cheerio');

// 模拟请求
const request = require('request');
request('https://your-heroku-app.herokuapp.com/api/data', function (error, response, body) {
    if (!error && response.statusCode == 200) {
        // 解析 HTML 响应
        const $ = cheerio.load(body);
        const jsonText = $('#json-text').text(); // 或者是其他需要解析出 JSON 的节点
        const jsonData = JSON.parse(jsonText);
        console.log(jsonData);
    }
});

在这个例子中，我们使用 request 模块模拟了一个请求。当我们得到 html 响应后，使用 cheerio 模块将响应解析为一个 DOM 对象，然后从 DOM 对象中抓取我们需要的 JSON 数据。最终，我们可以将 JSON 数据传递给前端页面进行展示。

总结

本文介绍了在 Heroku 生产环境中，如何用 JavaScript 处理返回的 HTML 响应，从而提取出我们需要的 JSON 数据。方法一是使用第三方库 axios，方法二是使用手动解析 HTML 响应方式。这两种方法各有优缺点，具体情况应根据实际项目情况选用。