js из html не получает ответ от сервера node.js
 

Здравствуйте!
возможно это есть в FAQ.

Cоздаю сервер на Node.JS на базе express.
Стандартный бэк-енд:

var express = require('express');
var app = express();
app.listen(3000);
app.get('/', getExample);
...
function getExample (req, response) {
    response.send("<h1>Главная страница</h1>");
}

Обращаюсь из браузера (Chrome)
и так http://127.0.0.1:3000/
и так http://localhost:3000/

В браузере всё отлично! Браузер получает и показывает строку "Главная страница"... казалось бы цель достигнута, но..

Ок. Приступаю к front-end. Создаю index.html и в нём скрипт, который должен обратиться к серверу и получить строку "<h1>Главная страница</h1>" и показать её в DIV (html я описывать не буду, обратимся сразу к "сердцу" скрипта)

var req = new XMLHttpRequest();
    req.open("GET", "http://127.0.0.1:3000/", true); 
    req.send();
    req.onreadystatechange = function() { 
        if (req.readyState != 4) return;//ещё не все данные подтянулись
        if (req.status != 200)   return;//ошибка
           console.log(req.responseText);
    }

По отладчику в Node.JS, и вижу что запрос доходит до сервера и сервер отвечает сообщением "Главная страница".
Но в скрипте:
req.status = 0
до console.log(req.responseText) скрипт не доходит.
"http://127.0.0.1:3000/" можно менять на "http://localhost:3000/" поведение одинаковое.

Помогите, пожалуйста разобраться. Кто и как решил этот вопрос? Мне надо получить ответ от сервера через JS на странице.

Вероятно сервер возвращает http code, отличный от 200.
Откройте в браузере devTools, вкладка network, перезагрузите страницу и посмотрите, какой код возвращает ваш сервер.

Посмотрел. status = 200

Герасим, 200 на обоих запросах?

переписал код фронта так:

var req = new XMLHttpRequest();
    req.open("GET", "http://localhost:3000/", true); 
    req.onload = function(){
        console.log(req.responseText);
    } 
    req.onerror = function(){
        console.log('err');
    }
    req.send();

Всё равно не попадает в onload (но попадает в onerror)
Теперь смотрю логи в Chrome->Network->Headers:
General> //'это мой запрос к серверу
Request URL: http://localhost:3000/
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:2080
Referrer Policy: no-referrer-when-downgrade

Response header //это ответ сервера
Accept-Ranges: none
Content-Length: 40
Content-Type: text/html; charset=utf-8
Date: Sat, 09 Jun 2018 08:24:05 GMT
ETag: W/"28-MIeEqjpzDTJgeZ7N+3WK/Yd3O94"
X-Powered-By: Express

Смотрю в Хроме вкладку Chrome->Network->Response и вижу там то что я собственно жду <h1>Главная страница</h1>

но в Хедерах остался ещё один хедер, продолжаю смотреть:
Chrome->Network->Headers
Request header
Provisional headers are shown
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36

И в консоли вывод:
Failed to load http://localhost:3000/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

пока мне не понятно почему формируется req.onerror, хотя видно что ответ-то правильный получен но в onload не попал

Это может быть связано с document.domain?
Ставлю эксперимент:
1) Запрос страницы из браузера
ввожу адрес сервера localhost:3000
и получаю "Главная страница" (т.к. всё норм)
Теперь в консоли набиваю console.log(document.domain);
получаю в ответ localhost

2) Запрос из скрипта
как я уже писал НЕ получаю "Главная страница" (т.к. всё НЕ норм)
Теперь в консоли набиваю console.log(document.domain);
получаю в ответ '' - пустая строка

Читаю эту тему, прям проблема присвоить document.domain = 'localhost'

Герасим, добавьте в ответ сервера заголовок "Access-Control-Allow-Origin" со значением "*", удалить его потом не забудьте.

воспользовался советом из темы
https://toster.ru/q/486551
Установил google chrome extensions: CORS
вот что пишет афтар ответа "Включайте и делайте кросдоменные запросы, отлично подойдет в учебных целях" ( holymotion)

Можно пример как это сделать?

Герасим, я не представляю, как это можно сделать)
Попробуйте так:

function getExample (req, response) {
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send("<h1>Главная страница</h1>");
}

https://stackoverflow.com/questions/...-is-the-origin