Question

好的，所以我得到以下代码是如何使用express将对象发送到HTML文件。但nodejs代码与HTML文件位于不同的主机上。那么如何将JSON数据发送到不同主机上的HTML文件呢？

Node JS file code:
app.get('/test', function(req, res, next) {
  res.json({ message: 'Hello World' });
});


And HTML file code:

$.ajax({
  url: '/test',
  complete: function(data) {
    console.log(data);
  }
});

Answer 1

请让我澄清一些事情。

以下代码是将对象发送到HTML文件的方式

这是不正确的。

app.get('/test', function(req, res, next) {
  res.json({ message: 'Hello World' });
});

在这里讨厌什么？有些东西会向request端点发送/test。它可以是浏览器，也可以是其他服务器。它甚至可以是iPhone，或任何能够发出HTTP请求的东西。

response是一个JSON对象：

{ message: 'Hello World' }

这意味着您已经拥有的已经足够的另一台服务器GET message对象@ /test。

重要的是要知道来自/test的回复不是HTML。它是JSON，浏览器显示没有问题。如果您查看页面源，您将看到我的意思。

任何服务器都可以向HTTP发送GET request http://example.com/test，只要<<>，它就会收到message JSON作为响应 / strong>您的服务器不会限制请求（即只允许您的域example.com向/test请求）。

跨源客户端网站请求

如果要将AJAX请求发送到其他域（cross origin），则需要确保服务器（express）明确允许客户端的来源。

<强>客户端：

// From http://test.com $.ajax({ url: 'http://example.com/test', complete: function(data) { console.log(data); } });

服务器

// http://example.com app.get('/test', function(req, res, next) { res.setHeader('Access-Control-Allow-Origin', 'http://test.com'); res.setHeader('Access-Control-Allow-Methods', 'GET'); res.json({ message: 'Hello World' }); });

默认情况下，浏览器不允许您向另一个域（源）发送AJAX请求，除非该源的响应包含Access-Control-Allow-Origin标头，并且该标头允许浏览器的来源。如果不存在此类标头，则默认情况下将阻止该请求，您将在控制台中看到以下错误：

XMLHttpRequest cannot load http://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.

Answer 2

您需要使用中间件

在expreess app中启用CORS

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

这可以防止浏览器在进行跨域ajax请求时抛出错误

how to enable cors in express

如何将JSON数据从节点js脚本发送到另一台服务器上的HTML文件

2 个答案: