XMLHttpRequest ответ null
Привет, я новичок в веб-разработке. У меня есть три файла: index.html, myscript.js и server.js. Кнопка в index.html вызывает функцию messageServer в myscript.js, которая отправляет XMLHttpRequest на server.js, выполняющий Express на Node. Сервер получает запрос, но ответ в myscript.js всегда равен нулю. Готовое состояние идет 1, а затем 4. Почему оно равно нулю? Заранее спасибо
Обновлено: код состояния ответа - 0
index.html:
<!DOCTYPE html>
<html>
<head>
<title id = "title">Page Title</title>
<script src = "myscript.js"></script>
</head>
<body>
<h1 id = "header">Header</h1>
<form>
<input type = "button" value = "Message Server" onclick = "messageServer();">
</form>
</body>
</html>
myscript.js
function messageServer() {
const xhr = new XMLHttpRequest();
const url = 'http://localhost:8888/';
xhr.responseType = 'json';
xhr.onreadystatechange = () => {
log("Ready state: " + xhr.readyState + ", response: " + xhr.response);
if (xhr.readyState === XMLHttpRequest.DONE) {
return xhr.response;
}
};
xhr.open('GET', url);
xhr.send();
}
и server.js
const express = require('express');
const app = express();
const port = 8888;
let requestCount = 1;
app.get('/', (req, res, next) => {
console.info('Received get request ' + requestCount);
++requestCount;
res.send(JSON.stringify({myKey: 'myValue'}));
});
app.listen(port);
@kiddorails Я получил эту ошибку: «TypeError: первый аргумент должен быть строкой или буфером», когда я это сделал
измените его обратно на более старую версию и добавьте перед ней res.setHeader('Content-Type', 'application/json');.
или res.json({myKey; 'myValue'}) тоже должно работать идеально
Пробовал оба. По-прежнему ноль
ОК. вместо проверки xhr.response попробуйте xhr.responseText
и удалите xhr.responseType = 'json';, если он все еще не работает, и попробуйте снова
и если все еще не работает, переместите xhr.responseType = 'json'; после xhr.open и попробуйте еще раз с xhr.response и xhr.responseText
Хорошо, поэтому переместите responseType на after open: с responseText оба являются пустыми строками и с response, когда readyState равно 1, это пустая строка, а когда readyState равно 4, оно равно нулю.
Я пробовал и другие вещи, не сработало
Вы вообще получаете там 200 откликов? Можете просто подтвердить это с помощью console.info(xhr.status)?
Код состояния был 0. Может быть, это потому, что я запускаю сервер и клиентский скрипт на одном компьютере?
код состояния, не готов
Я пробовал эту конечную точку API в вашем примере, и это сработало. Подождите, у него 400, так что это не сработало, но произошло что-то другое
да код статуса 0
измените журнал на console.info в myscript.js, также проверьте сообщения об ошибках на консоли.
Немного глупый вопрос, но как? Когда я нажимаю кнопку в браузере, она не связана с консолью, поэтому ничего не отображается. Даже если есть способ выполнить его независимо, сервер блокирует консоль, чтобы я не запускал какие-либо команды
Возможный дубликат XMLHttpRequest status 0 (responseText пуст)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Основная проблема заключается в том, что CORS (совместное использование ресурсов между источниками) не включено в экспрессе, хром немного строги в отношении CORS.
поместите код ниже перед app.get, чтобы включить совместное использование ресурсов из разных источников
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();
});
полный server.js должен быть таким, как показано ниже
var express = require("express");
var app = express();
const port = 8888;
let requestCount = 1;
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();
});
app.get('/', (req, res, next) => {
console.info('Received get request ' + requestCount);
++requestCount;
res.send(JSON.stringify({myKey: 'myValue'}));
});
app.listen(port);
Затем проверьте вкладку сети в инструменте разработчика, вы должны увидеть ответ {"myKey":"myValue"}.
Да! Вот и все, спасибо. Небольшой вопрос: нормально ли добавлять это в приложения узла? Это потому, что я запускаю его локально или что
это не только применимо к приложениям узла, в вашем примере это из-за XmlHttpRequest, вот полная ссылка developer.mozilla.org/en-US/docs/Web/HTTP/CORS, и какие запросы используют CORS? раздел должен объяснить это. даже в своем ответе я поставил «"это должен быть ваш домен /, так что для вашего примера локальный: 8888 *.
вы устанавливаете тип ответа как json, почему вы затем отправляете его в строковой форме? поменять его на
res.send({myKey: 'myValue'});