postman 渲染 html 响应并执行 JavaScript答案

【问题标题】：postman render html response and execute JavaScriptpostman 渲染 html 响应并执行 JavaScript
【发布时间】：2020-03-18 06:09:56
【问题描述】：

我有一个 http api 给我html response，我想“预览”它。

但里面有一些 javascript 代码，如果不执行它们，它不会给我正确的页面。

我目前手动将它们复制并粘贴到某个 aaa.html 文件中并使用 chrome 打开它（file://aaa.html），但我想简化这些步骤。

邮递员有没有办法做到这一点？还是有任何邮递员替代品可以做到这一点？

【问题讨论】：

您可以使用 Postman Visualizer，将脚本放入其中，它会为您工作。阅读更多 - learning.getpostman.com/docs/postman/sending-api-requests/… 想法是将您的整个响应发送到可视化器，然后尝试呈现它？我猜它可能会起作用。
@SivcanSingh 很酷的功能，但我认为这不符合我的要求。我的响应已经是带有 javascript 的 html，我只是一种简单的渲染方式。

标签： postman

【解决方案1】：

在 Postman 本身中有一个替代方法可以做到这一点。您必须使用pm.visualizer。只需打开您的 API 请求，它会为您提供 HTML 响应。然后转到Test选项卡，添加下面的行，然后点击Visualize选项卡：

pm.test("set  html",function(){
    var template=pm.response.text(); // save your html response in the template and then          
    pm.visualizer.set(template);     // set that template to pm.visualizer
})

【讨论】：

很好，它工作。但是外部资源呢，例如：js、css、jpg？似乎使用了错误的路径（file:///C:/Users/XXX/AppData/Local/Temp/js/XXX.js）来加载它们。

【解决方案2】：

来自邮递员official documentation

Postman 提供了一种可编程的方式来直观地表示您的请求响应。添加到请求测试的可视化代码将呈现在响应正文的“可视化”选项卡中，以及“漂亮”、“原始”和“预览”选项。

您需要将请求添加到测试中：

    var template = pm.response.text();
    pm.visualizer.set(template);

并在“可视化”选项卡上查看结果（在“漂亮”、“原始”和“预览”选项之后）。 Postman result HTML with JS and CSS

修复错误：

Refused to load the image 'file:///C:/some.png' because it violates the following Content Security Policy directive: "img-src http: https: data:".
如果内容根本找不到（404 Not Found）它沿着类似的路径'file:///C:/some.file'

需要在响应正文部分添加HTML标签：

    var response = pm.response.text();
    var base = '<base href="https://some.domain/">";
    var template = response.replace('<head>', '<head>' + base);
    pm.visualizer.set(template);

这个答案也解决了这个comment中的问题。

更多信息：

邮递员Visualizing responses
HTML <base> 标签in MDN Web Docs

【讨论】：