【问题标题】:How to send JSON data from node js script to HTML file on a different server如何将 JSON 数据从节点 js 脚本发送到不同服务器上的 HTML 文件
【发布时间】: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);
  }
});

【问题讨论】:

    标签: javascript html json node.js


    【解决方案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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-06-26
        • 2021-08-22
        • 1970-01-01
        • 2020-07-06
        • 2022-01-06
        • 2018-07-28
        • 1970-01-01
        相关资源
        最近更新 更多