1

我有一个静态 HTML 页面，hello.html。如果我双击 hello.html，它会在我的默认浏览器中打开，并正确显示 HTML，但在浏览器的搜索栏中，显示的不是带有主机名的 URL，而是我的 hello.html 的本地文件路径计算机。

我使用 express (node.js) 在我的计算机上制作了一个简单的 express web 服务器。它设置为监听 8080 端口，并有一个简单的 GET api。（API 现在做一些简单的事情，比如调用 'ls'）。我希望能够从我的静态 hello.html 调用该 GET API。在我的静态 HTML 页面中，我使用 jquery 对此 api 进行 ajax 调用，将其称为http://127.0.0.1:8080/myapi。一旦我启动快速服务器并加载页面，查看控制台日志，当我在浏览器中加载静态 HTML 页面时，对 myapi 的请求正在通过（ls 响应正在记录在控制台上），但是，jquery HTML 页面中的 ajax 始终执行错误函数，即使我将响应设置为 200。

我正在阅读很多关于为什么会发生这种情况的信息，并且阅读它可能是由于 CORS 问题。但是，在这种情况下，我无法在服务器端指定主机名，因为实际上并没有运行 Web 服务器，因此没有与我的静态 HTML 页面关联的实际主机名。

这甚至可能吗？（要在您的计算机上拥有一个没有运行 Web 服务器的静态 HTML 页面，使用 API 创建您自己的快速服务器，然后从静态网页调用这些 API？）

例子：

你好.html

<html>
<head>
<title>Hello World</title>
</head>
<body>
<script src"js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
     $.ajax({
        type: "GET",
        url: "http://127.0.0.1:8080/myapi",
        contentType: 'application/json',
        success: function(response) {
               alert("success!");
        },
        error: function(jqXHR, textStatus, errorThrown) {
                alert("error");
        },
    });
});
</script>


<p>Hello World!</p>
</body>
</html>

myserver.js：

var express = require('express');
var shelljs = require('shelljs');
var app = express();

app.get('/myapi', function (req, res) {

      shellStr = shelljs.exec('ls');
      if ( shellStr ) {
            console.log("successful call on server side");
            res.status(200);
            res.json({ ls: shellStr });
      }
      else {
           console.log("failure status on server side");
           res.status(500).json({ error: "Could not do ls"});
      }
})

var server = app.listen(8080, function() {
     console.log("Listening on 8080");
})

我通过提供“node myserver.js”来启动服务器，然后在浏览器中打开静态 HTML 页面。当它加载时，正在进行 API 调用，因为我看到了服务器端控制台输出，并且它正在成功。但是，回到静态 html 中，总是执行 ajax 调用的“错误”函数。

4

1 回答 1

1

我让它工作了！

万一其他人想知道，并且像我这样的表达和网络服务器是新手。

关键是也有 express 服务 hello.html。这样做很简单。

我将我的快递服务器放在这样的目录中：

myserver/myserver.js <--这是我的快递服务器

我将所有静态 html 文件移动到同一级别的目录中。

myserver/htmlfiles/ <-- 这个目录有 'hello.html'。

现在，在 myserver.js 中，我在顶部附近添加了以下行，就在 var app = express() 之后：

app.use(express.static('myhtml'))

这是做什么的，它会告诉 express 提供目录 myhtml 中的任何静态文件（将搜索该目录，相对于 myserver.js 所在的位置。）

如果我重新启动快速服务器（杀死当前服务器，然后再次运行'node myserver.js'），然后转到浏览器，如果我访问http://127.0.0.1:8080/hello.html - 页面会显示！

现在域起源是一样的，当对api进行ajax调用时，在浏览器中也是成功的！

（注意 - 在这些更改之后，我一开始确实遇到了问题，因为我在 hello.html 中的 ajax URL 正在调用http://localhost:8080/myapi，但我通过http://127.0在浏览器中显示 hello.html .0.1:8080/hello.html。一旦我将调用的 ajax URL 更改为http://127.0.0.1:8080/myapi - 一切正常。同样，如果我打开浏览器并转到http://localhost:8080 /hello.html并以这种方式显示 hello.html，如果调用的 ajax URL 是http://127.0.0.1:8080/myapi- ajax 调用将进入“错误”函数。您在 HTML 页面的 ajax URL 中使用的主机名似乎必须与调用时您在浏览器中访问 html 页面时使用的主机名相同（127.0.0.01 与 localhost）。）

于 2018-04-09T05:17:43.180 回答