Question

我尝试使用AJAX将Node与一个简单的表单连接起来。我有两个文件。

第一个是带有文本框和按钮的html文件。
第二个是响应请求的节点服务器。

我的目标是从用户（在文本框中）接收id并将其传递给节点服务器（使用AJAX调用），节点服务器以JSON格式返回id和相应的名称。

以下是我的代码。

The HTML File with AJAX call
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </head>

<body>
    <input type="text" id="guid" />
    <input type="button" id="submit" value="Get" />
</body>

<script>
    $('#submit').click(function() {              
            var id=$('#guid').val();;
                    $.ajax({
                        type: 'OPTIONS',
                        contentType: 'application/JSON;  charset=utf-8',
                        url: 'http://localhost:3300/in/'+id,                        
                        success: function(data) {
                            alert("sucess");
                            alert(data);
                        },
                        error: function() {
                            alert("failed");
                        },

                    });
        });
</script>

产生的错误是

SyntaxError：JSON.parse：第1行第1列的意外数据结尾 JSON数据

第二个文件是我的节点服务器文件，即info.js

const expr = require('express');
const app = expr();
app.disable('etag');
app.use(expr.json());
var data=[
  {id:"1",name:"aaa"},
  {id:"2",name:"bbb"},
  {id:"3",name:"ccc"}
];
app.options('/in/:id', function(req, res){
  const result = data.find(d=>d.id===req.params.id);
  res.set({'Content-Type': 'application/json; charset=utf-8'});
  res.send(JSON.stringify(result));
  console.log(JSON.stringify(result));
});
app.listen(3300);
console.log("listening to port 3300");

在上面的代码中，我将方法从“GET”更改为“OPTIONS”，因为AJAX调用使用OPTIONS作为其请求类型。我在控制台上记录了JSON数据，它返回了所请求ID的JSON格式。

截图如下。 The original web page and in the XHR the error is shown

我尝试将JSON响应传递给https://jsonlint.com/并验证它。它显示响应是一种正确的JSON格式。我仍然无法弄清楚我犯了哪个错误。我是Node的初学者，所以请帮我弄清楚问题。

传递的样本输入为2.节点以正确的名称“bbb”响应，并且JSON响应{“id”：“2”，“name”：“bbb”}登录到控制台。但是当传递给网页时会产生错误。

编辑：我尝试在Chrome上运行它，获得预期的响应，XHR的响应标签显示JSON数据，但执行ajax调用中的错误方法。但是，当我尝试在Firefox上运行它时，会产生错误。

Answer 1

我发现了错误。整个问题是由于Cross Origin Request。问题是“跨源请求被阻止：同源策略禁止读取远程资源原因：CORS标题'Access-Control-Allow-Origin'缺少节点js”，它显示在控制台选项卡中本身。最后添加了一段代码 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote ...............CORS header ‘Access-Control-Allow-Origin’ missing 回答我在服务器程序中的代码，现在它工作得很好..

谢谢..

节点js响应产生“SyntaxError：JSON.parse：意外的数据结束”

1 个答案: