Question

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

伪造用户数据

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

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

var router = new express.Router();

router.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()
    });
});

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>

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

XMLHttpRequest无法加载http://localhost:3500/api/user。没有＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; null＆＃39;因此不允许访问。

或使用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>

请告诉我如何解决这个问题及其发生的原因。如何从我的API获取JSON数据？

编辑：

问题是我的API在http://localhost:3500上，而http://localhost:8000上有GET请求的HTML，但不支持CORS。我写了这个问题得到解决的问题的答案https://stackoverflow.com/a/36526208/6135469

Answer 1

感谢Jonathan Lonowski https://stackoverflow.com/users/15031/jonathan-lonowski

我使用CORS Module解决我的问题，启用单路径的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>

Answer 2

您也可以在不使用CORS

的情况下启用CORS Module

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();
});

因此，代码看起来像这样

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'));
});

Answer 3

如果您的应用位于端口8000，请将$.ajax调用更改为8000.此外，您应将环境变量PORT更改为8000或3500，或将代码更改为默认值，以免混淆。

如何使用jQuery.getJSON在localhost上从我的API获取JSON数据

编辑：

3 个答案: