XMLHttpRequest ответ null - PullRequest
Новая
       5

XMLHttpRequest ответ null

0 голосов
/ 09 июня 2018

Привет, я новичок в веб-разработке.У меня есть три файла, index.html, myscript.js и server.js.Кнопка в index.html вызывает функцию messageServer в myscript.js, которая отправляет запрос XMLHttpRequest на server.js, на котором выполняется Express на узле.Сервер получает запрос, но ответ в myscript.js всегда равен нулю.ReadyState имеет значение 1, а затем 4. Почему он равен null?Заранее спасибо
Редактировать: код состояния ответа 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.log('Received get request ' + requestCount);
    ++requestCount;
    res.send(JSON.stringify({myKey: 'myValue'}));
});

app.listen(port);

1 Ответ

0 голосов
/ 10 июня 2018

Основная проблема: CORS (совместное использование ресурсов из разных источников) не включено в Express, Chrome немного строг в отношении 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();
});

complete 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.log('Received get request ' + requestCount);
    ++requestCount;
    res.send(JSON.stringify({myKey: 'myValue'}));
});

app.listen(port);

Затем проверьте на вкладке сети инструмента разработчика, вы должны увидеть {"myKey":"myValue"} в ответ.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...