从 html 页面提供 javascript 文件答案

【问题标题】：Serve javascript file from an html page从 html 页面提供 javascript 文件
【发布时间】：2017-05-18 16:37:31
【问题描述】：

我有一个来自第三方供应商的资源，该资源仅通过http 协议提供服务。当我包含这样的脚本标签时......

<script src="http://example.com"></script>

我得到一个带有 JSON 数据的 javascript 变量，类似于此...

var data = {"total": "10", "results": [{"name": "Joe", "title": "developer"}, {"name": "Jane", "title": "engineer"}]};

然后我可以在我的页面中使用变量data 来输出结果等。

问题是，我需要通过 SSL (https) 在页面上提供这些数据，并且我无法通过 http 为 https 页面发出资源请求 - 这意味着 <script/> 包含不起作用.

作为一种解决方案，我从服务器页面请求资源，例如 data.cfm，然后通过 https 从我的服务器重新提供 JS 变量。所以，在这种情况下，我想向https://anotherserver.com/data.cfm 提出请求，以提供与http://example.com 相同的JS

<cfhttp result="myData" method="GET" charset="utf-8" url="http://example.com">
<cfoutput><pre>#myData.fileContent#</pre></cfoutput>

我还应该注意，JSON 数据中包含 HTML 标记。

当我尝试转到https://anotherserver.com/data.cfm 时，我得到了数据，但它的格式不正确。例如，超链接作为超链接是活动的。

我也尝试使用<cfdump>，它将数据作为未格式化的字符串返回，但是当我使用<script src="https://anotherserver.com/data.cfm"></script> 标签时，我没有得到 JS 变量。

更新

通过进一步测试，我发现如果我只是将数据作为文本复制到 2 个文件中：data.cfm 和 data.js，那么 js 文件会按预期工作，而 cfm 文件不会。这使我相信文件扩展名导致资源被读取为 html。所以，这实际上更像是一个 Coldfusion 问题。如何将 cfm 文件设置为被浏览器读取为 javascript？是否有一些响应标头或元数据字段可以完成此操作？

【问题讨论】：

“我需要通过 SSL (https) 在页面上提供这些数据，并且我无法通过 http 为 https 页面发出资源请求”这部分对我来说没有意义。如果通过 HTTPS 为您的系统提供服务会阻止您向通过 HTTP 提供的资源发出请求？
@Ken stackoverflow.com/questions/28517391/…
@VincentvanderWeele 是的，如果您正在加载资源。他正在从返回一个 json 对象的脚本加载，然后使用该数据。为什么不直接通过 AJAX 请求对象？
为什么要注意只需下载 JavaScript 文件并将其保存到您的服务器（假设您可以这样做）。然后只需在 HTTPS 后面从您的服务器提供 JS 文件。
@Ken 你不能进行跨域ajax请求

标签： javascript http https coldfusion

【解决方案1】：

我可能会为此投反对票。正确的做法是告诉该服务在其服务器上启用 https。不使用 https 的面向公众的基于 Web 的服务是不可接受的。

【讨论】：

当然是合理的建议
我完全同意，我们也提出了这样的要求。我们正在尝试创建一个权宜之计的解决方案，直到在供应商端得到解决。

【解决方案2】：

首先，如果您在浏览器中查看 js 和 cfm 文件，那么 js 将基本上显示为文本输出，而 cfm 将被解释为 html。这是由于 Web 服务器自动返回的 mime 类型或浏览器完成的猜测。这就是 cfm 方法看起来不同的原因。但是，如果您使用脚本标签提取 url，它将被假定为 javascript。如果您在 cfm 页面上查看源代码，它应该看起来不错。

其次，我们需要更多信息来准确诊断导致您遇到的问题的原因，其中包含的 js 文件与托管相同信息的 cfm 文件导致后者出现错误。我最初的猜测是，这里发生的事情比我们在您的问题中看到的要多，并且存在 javascript 转义问题。（编辑：实际上我看到一些 js 代码可能会根据内容类型做出决定，因此返回可能会有所不同，具体取决于事物的使用方式）

最后，如果您将 cfm 文件的准确输出保存到 js 文件，那么您应该进行设置。通过脚本标签从 cfm 文件中提取 javascript 应该没有问题。但是，为了避免任何潜在问题并添加一些缓存，您可以将其保存到静态文件中。缓存将允许文件在一个时间段内只被拉一次（例如：每分钟一次）。在你的普通代码中，你可以添加这个......

<cfif not structKeyExists(application, "jsfilename_cachesaved") or application.jsfilename_cachesaved lt dateAdd("n", -1, now())>
    <cflock name="jsfileupdate" timeout="5">
        <cfif not structKeyExists(application, "jsfilename_cachesaved") or application.jsfilename_cachesaved lt dateAdd("n", -1, now())>
            <cfhttp result="myData" method="GET" charset="utf-8" url="http://example.com">
            <cffile action="write" file="#jsfilepath#" output="myData.fileContent" />
            <cfset application.jsfilename_cachesaved = now() />
        </cfif>
    </cflock>
</cfif>

（双 if 语句是为了避免不必要的锁定命中以及同时锁定的用户不必要的保存）

【讨论】：