Node.js - JavaScript - HTML - XMLHttpRequest 无法加载答案

【问题标题】：Node.js - JavaScript - HTML - XMLHttpRequest cannot loadNode.js - JavaScript - HTML - XMLHttpRequest 无法加载
【发布时间】：2014-03-17 08:15:03
【问题描述】：

Node.js - Javascript - HTML - XMLHttpRequest 无法加载

基本上我在一个 node.js 和 1 个 javascript/html 下发布了 2 个脚本

我将数据发布到我的 node.js 文件，但我收到此错误并且在我的 html 页面上看不到 node.js 的结果。

XMLHttpRequest cannot load http://192.168.2.109:8111/?name=nknk. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.2.109:8111' is therefore not allowed access

这是我的 Node.js 文件：

    var url = require('url');
    var http = require('http');
    var server = http.createServer(function (request, response) {
    var queryData = url.parse(request.url, true).query;
    response.writeHead(200, {"Content-Type": "text/plain"});

    if (queryData.name) {
    var basevalue = queryData.name;
    var value = basevalue.split (":");
    var exec = require('child_process').exec;

    console.log(value[0]);
    console.log(value[1]);

    exec ("casperjs test.js " + value[0] + " " + value[1] + '\n',function(err, stdout, stderr) {

    response.end(stdout);

    });

    } else {
    response.end("Contact Admin - Not Working\n");
    }
    });


    server.listen(1234);

这是我的 html/javascript：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html><head><title>Welcome To ....</title>
<script type="text/javascript">
function textareaToArray(t){
    return t.value.split(/[\n\r]+/);
}
function showArray(msg){
    for(i = 0; i < msg.length; i++) {
        // something per item
        var data = {}; //your own data
     $.post("http://192.168.2.109:8111" + "?" + $.param({name: msg[i]}), data);

    }
    // the old code
    document.getElementById("message").innerHTML = msg.join("&#013;");
}
</script>
</head>
<body>
<h1> WELCOME TO .... </h1>
<form>
<textarea rows="10" cols="60" name="alpha"></textarea>
<br>
<input type="button" value="show array" onclick="showArray(textareaToArray(this.form.alpha ))">
</form>
<br>
<textarea id="message" rows="6" cols="60" name="message"></textarea>
</body></html>

有人可以帮我解决这个问题，以便我可以将结果返回到我的 html 中而不会出现此错误

----edit

这是我正在尝试的代码，我仍然看不到来自 node.js 服务器的响应数据我需要查看我的节点服务器运行的 exec 命令的响应我知道这需要大约 40 秒才能完成，但我仍然没有看到任何输出到 html 的内容

node.js

var url = require('url')
var http = require('http')
var server = http.createServer(function (request, response) {
var queryData = url.parse(request.url, true).query;
response.writeHead(200, {"Content-Type": "text/plain"});

if (queryData.name) {
// user told us their name in the GET request, ex: http://host:8000/?name=Tom
var basevalue = queryData.name;
var value = basevalue.split (":");

console.log(value[0]);
console.log(value[1]);

var exec = require('child_process').exec;

exec ("casperjs test.js " + value[0] + " " + value[1] + '\n',function(err, stdout, stderr) {

response.end('_stdout(\'{"content": "blablabla"}\')');

});

} else {
response.end("Contact Admin - Not Working\n");
}
});

// Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8999);
~

javascript html

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html><head><title>Welcome To ....</title>
<script type="text/javascript">
function textareaToArray(t){
    return t.value.split(/[\n\r]+/);
}
function showArray(msg){
    for(i = 0; i < msg.length; i++) {
        // something per item
     //   var data = {}; //your own data
    //$.post("http://192.168.2.109:8121" + "?" + $.param({name: msg[i]}), data);
    $.ajax({
    url: 'http://192.168.2.109:8999' + '?' + $.param({name: msg[i]}),
    dataType: "jsonp",
    jsonpCallback: "_stdout",
    cache: false,
    timeout: 5000,
    success: function(data) {
    function doSomethingWithData(data) { $('#message').val(data.content); }

    },
    error: function(jqXHR, textStatus, errorThrown) {
    handleError(data);
    }
    });     

    }
    // the old code
    document.getElementById("message").innerHTML = msg.join("&#013;");
}
</script>
</head>
<body>
<h1> WELCOME TO .... </h1>
<form>
<textarea rows="10" cols="60" name="alpha"></textarea>
<br>
<input type="button" value="show array" onclick="showArray(textareaToArray(this.form.alpha ))">
</form>
<br>
<textarea id="message" rows="6" cols="60" name="message"></textarea>
</body></html>

【问题讨论】：

标签： javascript html node.js cors

【解决方案1】：

这是同源政策 (http://en.wikipedia.org/wiki/Same-origin_policy)。按以下方式修改您的回复：

response.writeHead(200, {
    "Content-Type": "text/plain",
    "Access-Control-Allow-Origin":"*"
});

【讨论】：

警告：此处使用“*”将允许从任何合规的 URL 访问您的 API。这可能是您想要的，也可能不是。阅读跨域资源共享页面了解更多信息：en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing
@JBCP 是的，我同意这不是最好的解决方案，因为安全性，但使用本地服务器，这是使事情正常进行的最简单方法。之后应该实施更安全的解决方案（JSONP、CORS...）。
当然，这是有道理的。我只是想指出这一点，以便人们知道。

【解决方案2】：

显然，您的 Web 应用程序与您的 nodejs 服务器不在同一主机上，因此，您违反了same origin policy。

你可以使用 JSONP：

var http = require('http');

http.createServer(function (req, res) {
    console.log('request received');
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('_stdout(\'{"content": "blablabla"}\')');
}).listen(1234);

你的电话：

$.ajax({
    url: 'http://192.168.2.109:8111' + '?' + $.param({name: msg[i]}),
    dataType: "jsonp",
    jsonpCallback: "_stdout",
    cache: false,
    timeout: 5000,
    success: function(data) {
        doSomethingWithData(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        handleError(data);
    }
});

【讨论】：

这看起来像我想这样做我了解 ajax 但我将如何将 jsonp 实现到我现有的代码
我知道这听起来很愚蠢，但你能举个例子说明我将在我的代码中替换的内容吗？我对 node.js 很陌生
好的 finnaly 整理了代码我如何将数据输出到我的 html 页面我知道它发送数据位我仍然在我的 html 页面上看不到任何内容
没有愚蠢的问题:) 如果您想将响应放在您的 html 页面中，那么在我的示例中实现该功能，如下所示：function doSomethingWithData(data) { $('#message').val(data.content); }
你能看看我的编辑并为我更正吗？我用不同的方法尝试了好几天都无法让这个工作大声笑

【解决方案3】：

我的解决方案很简单。只需在服务器脚本端需要 cors 模块。由于 CORS（跨源资源共享），除非在大多数现代浏览器中启用，否则它会被禁用。在 node 中需要应用程序中的 cors 模块并相应地使用它。

Ex:

var cors=require(‘cors’);
var app=express();
app.use(cors());

【讨论】：