Nodejs 前端如何访问rest服务

Nodejs 前端如何访问rest服务

####前端直接使用jquery访问restify建立的rest服务 涉及到跨域了,应该使用jsonp访问. 那这样rest服务就必须修改成符合jsonp格式的格式 callback({xx:xx}) 吗??

11 回复

Node.js 前端如何访问 REST 服务

在现代 Web 开发中，前端通常需要与后端 API 进行交互。REST（Representational State Transfer）是一种常见的架构风格，用于设计网络服务。本篇将介绍如何在前端使用 Node.js 和 jQuery 访问由 RESTify（一个用于构建 RESTful 服务的 Node.js 模块）创建的 REST 服务，并处理跨域问题。

使用 jQuery 访问 REST 服务

首先，确保你已经在前端项目中引入了 jQuery 库。你可以通过 CDN 引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

假设你的 RESTify 服务运行在一个不同的域名上，例如 http://api.example.com，并且你需要从 http://example.com 的前端页面获取数据。

示例 RESTify 服务

首先，我们创建一个简单的 RESTify 服务：

const restify = require('restify');
const server = restify.createServer();

server.get('/data', (req, res, next) => {
    res.json({ message: 'Hello, World!' });
});

server.listen(8080, () => {
    console.log('%s listening at %s', server.name, server.url);
});
前端 jQuery 调用 REST 服务

由于跨域限制，前端无法直接通过 AJAX 请求访问不同域的服务。这时可以使用 JSONP（JSON with Padding）来解决跨域问题。JSONP 是一种利用 <script> 标签不受同源策略限制的特性来实现跨域请求的方法。

修改 RESTify 服务以支持 JSONP：

server.get('/data', (req, res, next) => {
    const data = { message: 'Hello, World!' };
    if (req.query.callback) {
        res.contentType('application/javascript');
        res.send(`${req.query.callback}(${JSON.stringify(data)})`);
    } else {
        res.json(data);
    }
});

前端 jQuery 代码示例：

$.ajax({
    url: 'http://api.example.com/data',
    type: 'GET',
    dataType: 'jsonp',
    jsonpCallback: 'handleData',
    success: function(response) {
        console.log('Data received:', response);
    },
    error: function(error) {
        console.error('Error fetching data:', error);
    }
});

function handleData(data) {
    console.log('Data from JSONP callback:', data);
}

在这个例子中，jQuery 会自动添加一个查询参数 callback=handleData 到请求 URL 中。RESTify 服务检测到这个参数后，将以 JSONP 格式返回数据。

通过这种方式，即使前端和后端不在同一个域中，也可以顺利地进行数据交换。


你这耦合的也太深了。

作为服务器，还管你跨不跨域。 只要你够了权限， 发给你http消息文本就是服务器唯一要做的事情。

如果你要json数据，让服务器把json格式化成字符串放进http消息流，客户端取出来解析就行了。

至于浏览器的jsonp， 不过是浏览器内部程序把接收到的http消息文本进行了一次JSON.parse而已。

没接触过rest的服务,之前一直用.net的webservice 如果不跨域,直接返回json就可以了; 但是要跨域 使用jsonp 就不能直接返回json, 是要写成 “callback(json字符串)” 格式.

刚试验了一下, restify是直接

res.send(json);

方便,跨不跨域都可以用.

话说 一般webservice很少直接前端用js调用,都是先引入到项目; 想问一下 , rest服务 典型的使用方式是直接用前端的js调用吗?

用ajax必然会涉及到跨域，如果是首屏展示可以用bigpipe，如果是异步请求也可以用websocket替代。对ajax异步请求是需要做安全限制的，特别是跨域的。

jsonp不是这样的，哥们，jsonp是利用脚本载入进行跨域的，http传输不涉及到域的问题。

Restify内置有支持jsonp的中间件，必须的

所以直接写,很方便

在前端使用 Node.js 和 jQuery 访问 REST 服务时，确实可能会遇到跨域（CORS）问题。为了解决这个问题，可以使用 JSONP（JSON with Padding），但这需要后端支持 JSONP 格式。

示例代码

假设你有一个 REST 服务运行在 http://api.example.com，而你的前端应用运行在 http://example.com。你需要让前端通过 jQuery 访问 REST 服务。

假设你的 REST 服务返回的数据如下：

{
    "name": "John Doe",
    "age": 30
}

修改 REST 服务以支持 JSONP

为了让 REST 服务支持 JSONP，你需要根据请求参数 callback 的值来包装返回的数据。例如：

const restify = require('restify');
const server = restify.createServer();

server.get('/user', (req, res) => {
    const data = { name: 'John Doe', age: 30 };
    
    // 检查是否包含 `callback` 参数
    if (req.query.callback) {
        res.setHeader('Content-Type', 'application/javascript');
        res.send(`${req.query.callback}(${JSON.stringify(data)})`);
    } else {
        res.json(data);
    }
});

server.listen(3000, () => {
    console.log('Server is listening on port 3000');
});

前端 jQuery 代码

在前端页面中，你可以使用 jQuery 来发送 JSONP 请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="result"></div>

    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'http://api.example.com/user',
                dataType: 'jsonp',
                jsonpCallback: 'jsonpCallback', // 可选，指定回调函数名
                success: function(data) {
                    $('#result').text(JSON.stringify(data));
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        });

        // 自定义的回调函数
        function jsonpCallback(data) {
            console.log(data);
        }
    </script>
</body>
</html>

解释

  1. REST 服务：我们检查请求参数中是否有 callback，如果有，则将数据用该参数值包裹并设置响应类型为 application/javascript。
  2. jQuery 代码：我们使用 $.ajax 发送 JSONP 请求，并设置 dataType 为 'jsonp'。jQuery 会自动处理 JSONP 的细节，包括生成唯一的回调函数名、添加查询字符串以及处理响应。

这种方式解决了跨域问题，并且允许你在前端安全地获取来自 REST 服务的数据。

回到顶部