javascript - XMLHttpRequest 响应为空

标签 javascript html node.js ajax express

大家好,我是网络开发的新手。我有三个文件,index.html、myscript.js 和 server.js。 index.html 上的按钮调用 myscript.js 中的 messageServer 函数,该函数将 XMLHttpRequest 发送到在 Node 上运行 Express 的 server.js。服务器收到请求,但 myscript.js 中的响应始终为空。 readyState 变为 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>

我的脚本.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);

最佳答案

主要问题是CORS (跨源资源共享)未在 express 上启用,chrome 对 CORS 有点严格。

将下面的代码放在 app.get 之前以启用 cross-origin resource sharing

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

app.listen(port);

然后检查开发人员工具的网络选项卡,您应该看到 {"myKey":"myValue"} 响应。

关于javascript - XMLHttpRequest 响应为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50778178/

相关文章:

javascript - 类和函数构造函数有何不同

javascript - 函数返回一个函数?

html - 使用 flex-direction : column 将不同高度的内容垂直居中

javascript - 如何在主页后显示图像

javascript - 尝试对对象中的键进行排序时结果不正确

javascript - 查找包含点的键并替换为@

javascript - 如何防止在 Html 输入(组合框)中显示 val

node.js - Express + JWT 排除某些路由

javascript - Sails.js 服务器不再启动

javascript - 如何在 Javascript 中通过 Azure 移动服务自定义 API 使用 Promises/Chaining