Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.06.2018, 09:55
Интересующийся
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 24

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 на странице.
Ответить с цитированием
  #2 (permalink)  
Старый 09.06.2018, 10:02
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Вероятно сервер возвращает http code, отличный от 200.
Откройте в браузере devTools, вкладка network, перезагрузите страницу и посмотрите, какой код возвращает ваш сервер.
Ответить с цитированием
  #3 (permalink)  
Старый 09.06.2018, 10:23
Интересующийся
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 24

Сообщение от Nexus Посмотреть сообщение
Вероятно сервер возвращает http code, отличный от 200.
Откройте в браузере devTools, вкладка network, перезагрузите страницу и посмотрите, какой код возвращает ваш сервер.
Посмотрел. status = 200
Ответить с цитированием
  #4 (permalink)  
Старый 09.06.2018, 10:57
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Герасим, 200 на обоих запросах?
Ответить с цитированием
  #5 (permalink)  
Старый 09.06.2018, 11:28
Интересующийся
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 24

переписал код фронта так:
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 не попал
Ответить с цитированием
  #6 (permalink)  
Старый 09.06.2018, 12:44
Интересующийся
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 24

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

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

Читаю эту тему, прям проблема присвоить document.domain = 'localhost'
Ответить с цитированием
  #7 (permalink)  
Старый 09.06.2018, 12:57
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Герасим, добавьте в ответ сервера заголовок "Access-Control-Allow-Origin" со значением "*", удалить его потом не забудьте.
Ответить с цитированием
  #8 (permalink)  
Старый 09.06.2018, 12:58
Интересующийся
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 24

воспользовался советом из темы
https://toster.ru/q/486551
Установил google chrome extensions: CORS
вот что пишет афтар ответа "Включайте и делайте кросдоменные запросы, отлично подойдет в учебных целях" ( holymotion)
Ответить с цитированием
  #9 (permalink)  
Старый 09.06.2018, 12:59
Интересующийся
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 24

Сообщение от Nexus Посмотреть сообщение
Герасим, добавьте в ответ сервера заголовок "Access-Control-Allow-Origin" со значением "*", удалить его потом не забудьте.
Можно пример как это сделать?
Ответить с цитированием
  #10 (permalink)  
Старый 09.06.2018, 13:03
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Герасим, я не представляю, как это можно сделать)
Попробуйте так:
function getExample (req, response) {
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send("<h1>Главная страница</h1>");
}


https://stackoverflow.com/questions/...-is-the-origin
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вставка значения из JS в html форму oopros Общие вопросы Javascript 2 29.09.2016 13:23
Можно ли заккоментировать HTML и CSS с помощью JS? AlexKain Элементы интерфейса 6 10.06.2016 16:53
Kак преобразовать кракозябры(Мнемоники) обратно. html, node js vlzkonopatov AJAX и COMET 5 03.12.2014 14:12
Html метки + div + JS boltayka Events/DOM/Window 1 07.09.2009 17:21
Загрузка дополнительного js кода с сервера Anonymous2008 Общие вопросы Javascript 5 20.11.2008 12:33