javascript - How to send JSON data from node js script to HTML file on a different server - Stack Overflow

admin管理员组

文章数量:1324995

Okay so I get that the code below is how you send an object to an HTML file using express. But the nodejs code is on a different host than the HTML file. So how do I send the JSON data to that HTML file that's on a different host?

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


And HTML file code:

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

Okay so I get that the code below is how you send an object to an HTML file using express. But the nodejs code is on a different host than the HTML file. So how do I send the JSON data to that HTML file that's on a different host?

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


And HTML file code:

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

• javascript
• html
• json
• node.js

Share Improve this question Follow asked Jan 22, 2017 at 2:44 Gavin WGavin W 3511 gold badge11 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Please let me clarify a few things.

the code below is how you send an object to an HTML file

That is not correct.

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

What is happing here? Something sends a request to the /test endpoint. It could be a browser, or it could be another server. It could even be an iPhone, or anything with the ability to make a HTTP request.

The response is a JSON object:

{ message: 'Hello World' }

That means what you already have is enough for another server to GET your message object @ /test.

It's important to know that the response from /test is not HTML. It is JSON, which browsers have no trouble displaying. If you view the page source, you'll see what I mean.

Any server could send a HTTP GET request to http://example./test and it would receive the message JSON as a response as long as your server does not restrict the request (i.e. only allow your domain example. to request to /test).

Cross Origin Client Site Requests

If you want to send an AJAX request to a different domain (cross origin), you will need to make sure that the server (express) explicitly allows the client's origin.

Client:

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

Server:

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

Browsers, by default, won't allow you to send an AJAX request to another domain (origin), unless that origin's response includes an Access-Control-Allow-Origin header and that header allows the browser's origin. If no such header is present, the request will be blocked by default and you'll see the following error in the console:

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

you need to enable CORS in expreess app by using middleware

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();
});

this prevents the browser to throw error while making cross domain ajax request

how to enable cors in express

本文标签： javascriptHow to send JSON data from node js script to HTML file on a different serverStack Overflow