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

Posted 2023-03-07

【中文标题】如何将 JSON 数据从节点 js 脚本发送到不同服务器上的 HTML 文件

【英文标题】：How to send JSON data from node js script to HTML file on a different server

【发布时间】：2017-06-06 19:23:26

【问题描述】：

好的，我知道下面的代码是您如何使用 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);
  
);

【参考方案1】：

请让我澄清一些事情。

下面的代码是您如何将对象发送到 HTML 文件

这是不正确的。

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

这里发生了什么？有些东西会向/test 端点发送request。它可以是浏览器，也可以是另一台服务器。它甚至可以是 iPhone，或者任何能够发出 HTTP 请求的东西。

response 是一个 JSON 对象：

message: 'Hello World'

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

重要的是要知道来自/test 的响应不是 HTML。它是 JSON，浏览器可以轻松显示。如果您查看页面源代码，您就会明白我的意思。

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

跨源客户端站点请求

如果您想向不同的域 (cross origin) 发送 AJAX 请求，则需要确保服务器（快递）明确允许客户端的来源。

客户：

// 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.

【参考方案2】：

您需要通过中间件在 express 应用中启用 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