来自 localhost:3000 api 的 jQuery ajax答案

【问题标题】：jQuery ajax from localhost:3000 api来自 localhost:3000 api 的 jQuery ajax
【发布时间】：2016-10-22 06:47:17
【问题描述】：

我在一个名为 (rest) 的文件夹中创建了一个 RESTful API，它连接到我的 localhost 上的 3000 端口.....http://localhost:3000/api/products。我还在一个名为 (logs) 的文件夹中创建了一个 jQuery 日志应用程序，执行 Ajax 调用以从 API 检索数据、添加新用户等等。我在浏览器同步上运行我的应用程序，该应用程序在另一个端口上运行，到目前为止我无法连接到 API，因为我不知道我应该连接到哪个路径 URL。请你帮我做两件事：

这两个文件夹（rest）、（logs）放在哪里？
API 的 URL 是什么（在端口：3000 上运行）？

我的 jquery 应用代码：

<!DOCTYPE html>
<html lang="en">
<head>
<!--------------------------- Meta tags -------------------->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Logs</title>



    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <!-- jQuery UI -->
    <script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- Jquery css ui -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css">
    <!-- My stile link -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="row">
        <div class="col-md-6">
            <table class="table table-striped">
                <thead>
                <tr> <th>ID</th> <th>First name</th> <th>Last name</th> </tr>
                </thead>
                <tbody class="user">

                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <button class="btn btn-success getUsers"> Get Users </button>
            <form class= "form-inline">
                <input id="id" class="form-group" placeholder="ID">
                <input id="firstName" class="form-group" placeholder="First name">
                <input id="lastName" class="form-group" placeholder="Last name">
                <button class="btn btn-success addUsers"> Add a user</button>
            </form>
        </div>
    </div>
    <script>
        var $user = $('.user');
        var $id = $('#id');
        var $firstName = $('#firstName');
        var $lastName = $('#lastName');
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        $('.getUsers').click(function(){
            $.ajax({
                type:"GET",
                url: '/api/products',
                dataType: 'json',
                success: function(users){
                    $.each(users, function(i, user){
                        $user.append('<tr><td>'+ user.id +'</td> <td>'+ user.firstName +'</td> <td>' +user.lastName + '</td></tr>');
                    });
                },
                error: function(){
                    alert('error');
                }
            });
        });
        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        $('.addUsers').click(function(){
            var $newUser = {
                id: $id.val(),
                firstName: $firstName.val(),
                lastName: $lastName.val()
            };
            $.ajax({
                type:"POST",
                url: '/api/products',
                dataType: 'json',
                data: $newUser,
                success: function(newUser){
                        $user.append('<tr><td>'+ newUser.id +'</td> <td>'+ newUser.firstName +'</td> <td>' +newUser.lastName + '</td></tr>');
                },
                error: function(){
                    console.log('error');
                }
            });
        });
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    </script>
</body>
</html>

我的 api 代码：

/*************** server.js ************************/

    // DEPENDENCIES
var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');

// MongoDB
mongoose.connect('mongodb://localhost/testdb');

// EXPRESS
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());  

// ROUTES
app.use('/api', require('./routes/api')); 

// START SERVER
app.listen(3000);
console.log('API is working on port 3000,yes');

/**************** api.js *************************** **/

// DEPENDENCIES
var express = require('express');
var router = express.Router();

// MODELS
var Product = require('../models/product');

// ROUTES
Product.methods(['get', 'put', 'post', 'delete']);
Product.register(router, '/products');

// RETURN ROUTER
module.exports = router;

/****************** product.js ******************/

// DEPENDENCIES
var restful = require('node-restful');
var mongoose = restful.mongoose;

// SCHEMA
var productSchema = new mongoose.Schema({
    id: Number,
    firstName: String,
    lastName: String,
    mark: Number
});

// return model
module.exports = restful.model('Products', productSchema);

注意：我对后端来说太新了。

提前谢谢你。

【问题讨论】：

好的，我替换了使用 jquery ajax 的 index.html .. 在 api.js 同一级别的 rest/routes 中，我还将 api 端口更改为 3002，因为 3000 忙于浏览器同步，，现在我收到此错误：XMLHttpRequest 无法加载localhost:3002/api/products。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'localhost:3000'。

标签： jquery node.js api rest express

【解决方案1】：

您的服务器必须启用CORS 要做到这一点，您可以使用CORS Module

用npm install cors安装这个模块，添加到依赖var cors = require('cors');

只需将您的 app.use('/api', require('./routes/api')); 更改为 app.use('/api', cors(), require('./routes/api'));

如果要为所有路由启用 CORS，请在包含模块后写入 app.use(cors())

【讨论】：