Javascript 如何使用jQuery.getJSON从本地主机上的API获取JSON数据_Javascript_Jquery_Json_Node.js_Api

Javascript 如何使用jQuery.getJSON从本地主机上的API获取JSON数据

javascript jquery json node.js api

Javascript 如何使用jQuery.getJSON从本地主机上的API获取JSON数据,javascript,jquery,json,node.js,api,Javascript,Jquery,Json,Node.js,Api,我在Node.js上有一个简单的API，使用看起来是这样的： var express = require('express'), cors = require('cors'), app = express(), faker = require('faker'); app.set('port', process.env.PORT || 3500); var router = new express.Router(); router.get('/api/user',

我在Node.js上有一个简单的API，使用

看起来是这样的：

var express = require('express'),
    cors = require('cors'),
    app = express(),
    faker = require('faker');

app.set('port', process.env.PORT || 3500);

var router = new express.Router();

router.get('/api/user', cors(), function(req, res) {
    res.json({
        name: faker.name.findName(),
        email: faker.internet.email(),
        address: faker.address.streetAddress(),
        bio: faker.lorem.sentence(),
        image: faker.image.avatar()
    });
});

app.use('/', router);

var server = app.listen(app.get('port'), function() {
    console.log('Server up: http://localhost:' + app.get('port'));
});

但当我尝试使用jQuery获取这些数据时：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
    <script type="text/javascript">
        $.getJSON('http://localhost:3500/api/user').done(function(data) {
            console.log(data)
        })
    </script>
</body>
</html>


$.getJSON（'http://localhost:3500/api/user）。完成（函数（数据）{
console.log（数据）
})

我在控制台中遇到以下错误：

无法加载XMLHttpRequest。不 “Access Control Allow Origin”标头出现在请求的服务器上资源。因此，不允许访问源“null”

或者使用jQuery AJAX：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
    <script type="text/javascript">
        $.ajax({
            url: "http://localhost:3500/api/user",
            jsonp: "callback",
            dataType: "jsonp",
            success: function(data) {
                console.log(data);
            }
        });
    </script>
</body>
</html>


$.ajax({
url:“http://localhost:3500/api/user",
jsonp：“回调”，
数据类型：“jsonp”，
成功：功能（数据）{
控制台日志（数据）；
}
});

请告诉我如何解决这个问题以及为什么会发生。如何从我的API获取JSON数据

编辑：

问题是我的API在

http://localhost:3500

和带有GET请求的HTMLhttp://localhost:8000但不支持。我为这个问题编写了答案，在这个问题中，这个问题得到了解决

更改您的

$。如果您的应用程序位于端口8000上，则ajax

呼叫说8000。此外，您还应该将环境变量端口更改为8000或3500，或者将代码更改为默认值，以减少混淆。

更改您的

$。如果您的应用程序位于端口8000上，则ajax

呼叫说8000。此外，您还应该将环境变量端口更改为8000或3500，或者将代码更改为默认值，以减少混淆。

感谢Jonathan Lonowski

我使用Enable CORS为一条路线解决了我的问题

现在代码如下所示：

var express = require('express'),
    cors = require('cors'),
    app = express(),
    faker = require('faker');

app.set('port', process.env.PORT || 3500);

var router = new express.Router();

router.get('/api/user', cors(), function(req, res) {
    res.json({
        name: faker.name.findName(),
        email: faker.internet.email(),
        address: faker.address.streetAddress(),
        bio: faker.lorem.sentence(),
        image: faker.image.avatar()
    });
});

app.use('/', router);

var server = app.listen(app.get('port'), function() {
    console.log('Server up: http://localhost:' + app.get('port'));
});

现在我可以通过另一个端口的get请求从API获取数据

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
    <script type="text/javascript">
        $.getJSON('http://localhost:3500/api/user').done(function(data) {
            console.log(data)
        })
    </script>
</body>
</html>


$.getJSON（'http://localhost:3500/api/user）。完成（函数（数据）{
console.log（数据）
})

谢谢乔纳森·洛诺夫斯基

我使用Enable CORS为一条路线解决了我的问题

现在代码如下所示：

var express = require('express'),
    cors = require('cors'),
    app = express(),
    faker = require('faker');

app.set('port', process.env.PORT || 3500);

var router = new express.Router();

router.get('/api/user', cors(), function(req, res) {
    res.json({
        name: faker.name.findName(),
        email: faker.internet.email(),
        address: faker.address.streetAddress(),
        bio: faker.lorem.sentence(),
        image: faker.image.avatar()
    });
});

app.use('/', router);

var server = app.listen(app.get('port'), function() {
    console.log('Server up: http://localhost:' + app.get('port'));
});

现在我可以通过另一个端口的get请求从API获取数据

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
    <script type="text/javascript">
        $.getJSON('http://localhost:3500/api/user').done(function(data) {
            console.log(data)
        })
    </script>
</body>
</html>


$.getJSON（'http://localhost:3500/api/user）。完成（函数（数据）{
console.log（数据）
})

您也可以不使用

因此，代码将如下所示

var express = require('express'),
    app = express(),
    faker = require('faker');

app.set('port', process.env.PORT || 3500);

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('/api/user', function(req, res) {
    res.json({
        name: faker.name.findName(),
        email: faker.internet.email(),
        address: faker.address.streetAddress(),
        bio: faker.lorem.sentence(),
        image: faker.image.avatar()
    });
});

var server = app.listen(app.get('port'), function() {
    console.log('Server up: http://localhost:' + app.get('port'));
});

也可以在不使用的情况下启用

因此，代码将如下所示

var express = require('express'),
    app = express(),
    faker = require('faker');

app.set('port', process.env.PORT || 3500);

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('/api/user', function(req, res) {
    res.json({
        name: faker.name.findName(),
        email: faker.internet.email(),
        address: faker.address.streetAddress(),
        bio: faker.lorem.sentence(),
        image: faker.image.avatar()
    });
});

var server = app.listen(app.get('port'), function() {
    console.log('Server up: http://localhost:' + app.get('port'));
});

这意味着您需要修改API应用程序。由于端口不同，导致同一源策略失败，API必须授予其他源（端口

）权限才能发出请求。为此，它必须通过在响应时包含适当的

访问控制-*

头来实现。（也请注意CORS。）您可以使用帮助。@JonathanLonowski噢，非常感谢。CORS模块解决了我的问题。我已经删除了我提到你的IP的评论。但是，如果没有这些上下文注释，您应该编辑您的问题以注意HTML页面使用的其他端口/地址。这意味着您需要修改API应用程序。由于端口不同，导致同一源策略失败，API必须授予其他源（端口

）权限才能发出请求。为此，它必须通过在响应时包含适当的

访问控制-*

头来实现。（也请注意CORS。）您可以使用帮助。@JonathanLonowski噢，非常感谢。CORS模块解决了我的问题。我已经删除了我提到你的IP的评论。但是，如果没有这些上下文注释，您应该编辑您的问题，以注意HTML页面使用的其他端口/地址。您可以为所有路由设置它：

app.use（cors（））

，并在第一个路由开始之前设置它。您可以为所有路由设置它：

app.use（cors（））

并在第一条路线开始前将其放置。