【问题标题】:Is it possible to get remote javascript file to execute on the server before being embedded in page?是否可以在嵌入页面之前让远程 javascript 文件在服务器上执行?
【发布时间】:2016-09-23 16:06:58
【问题描述】:

好的,我正在访问一个名为 VENDOR_API_SERVER 的远程服务器以获取各种数据。我有一个在 MY_APP_SERVER 上运行的应用程序,其中包含一个 javascript 文件,该文件使用 AJAX 处理来自/来自 VENDOR_API_SERVER 的请求和响应。然后我有 MY_USER_FACING_APP,它通过 <script> 标签嵌入上述 javascript 文件。所有 3 个应用程序都在不同的主机上运行。当 javascript 文件对 VENDOR_API_SERVER 进行 REST 调用时,我希望它从 MY_APP_SERVER 执行,然后将响应数据提供给 MY_USER_FACING_APP 上的页面。使用下面的配置,javascript 文件正在从 MY_USER_FACING_APP 执行,这是我试图避免的。

MY_APP_SERVER 上的 req.js
URL(示例):http://my_app_server.io/js/req.js

var jqxhr = $.get( "http://vendor_api_server.io/api/dothis", function() {
    console.log('request made');
})
  .done(function() {
    console.log('success - check log');
  })
  .fail(function() {
    console.log('fail - wassup');
  })

MY_USER_FACING_APP 上的results.html
URL(示例):http://my_user_facing_server.io/search/results.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Results</title>
    <script src="http://my_app_server.io/js/req.js"></script>
</head>

<body>
    <h1>Results</h1>
</body>
</html>

我在将响应数据提供给 MY_USER_FACING_APP 之前无法由 MY_APP_SERVER 执行该 javascript 文件,我认为必须有一些安全、优雅的方式来使用 MY_APP_SERVER 作为代理/代表,但我遇到了困难把我的头缠在它周围。或者我想要做的可能只是一个巨大的核心黑客......我不知道,因为我对这种类型的开发很陌生。

有任何见解和/或智慧可以传授吗?

【问题讨论】:

  • 为什么不在 YOUR_APP_SERVER 中发出服务器端请求而不是 javascript 请求?
  • 为什么脚本驻留在 my_app_server 而不是它所属的 my_user_facing_app 上?它有什么特别之处? my_app_server 到底有什么用?
  • 是的,无论脚本做什么,您的服务器也可以。但不仅仅是通过执行一个用于浏览器环境的脚本。
  • @Bergi - 我正在尝试执行的 javaScript 是我正在开发的插件。任何选择购买该插件的人都会通过脚本标签将其嵌入他们的应用程序中。为了让我保持控制并向每个用户推送更新,它必须驻留在 MY_APP_SERVER 上。
  • 那么 my_user_facing_app 有什么特别之处呢?它似乎只是另一个使用该插件的网页。为什么它需要在服务器端执行插件,不像其他每个页面都有插件?

标签: javascript ajax cross-domain


【解决方案1】:

现在,我让 javascript 插件文件向 MY_APP_SERVER 上的 PHP 页面发出 AJAX 请求。该页面反过来使用 cURL 对 VENDOR_API_SERVER 进行 REST 调用,并将返回的数据发送回 javascript/plugin 文件,以便可以在 CUSTOMERS_USER_FACING_APP 上运行的应用程序的 DOM 中对其进行操作和显示。

MY_APP_SERVER 上的plugin.js
URL(示例):http://my_app_server.io/plugin.js

var jqxhr = $.get( "http://my_app_server.io/curl.php", function() {
    console.log('request made');
})
  .done(function(data) {
    console.log('success - check log');
    console.log('response data: %o', data);
  })
  .fail(function() {
    console.log('fail - wassup!');
  })


MY_APP_SERVER 上的 curl.php
URL(示例):http://my_app_server.io/curl.php

<?php
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,"http://vendor_api_server.io/api/dothis");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS,
            "postvar1=value1&postvar2=value2&postvar3=value3");


// receive server response ...
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$server_output = curl_exec ($ch);

curl_close ($ch);

print $server_output;

?>


CUSTOMERS_USER_FACING_APP 上的results.html
网址(示例):http://customers_user_facing_server.io/search/results.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Results</title>
    <script src="http://my_app_server.io/js/req.js"></script>
</head>
<body>
    <h1>Results</h1>
</body>
</html>

所以我仍然不相信这是最好的方法,但它确实实现了我的目标,即保持对 API 的请求来自 MY_APP_SERVER 而不是 CUSTOMERS_USER_FACING_APP 的来源。

请随意对我在这里所做的任何事情进行抨击。对我来说,这似乎很“变通”。我很想听听关于不那么棘手的解决方案的任何想法。

【讨论】:

    猜你喜欢
    • 2019-12-14
    • 1970-01-01
    • 2012-05-02
    • 2018-07-17
    • 1970-01-01
    • 2021-02-08
    • 2015-08-18
    • 2014-05-06
    • 1970-01-01
    相关资源
    最近更新 更多