node命令行服务器(http-server)和跨域的实现

下面是详细讲解“node命令行服务器(http-server)和跨域的实现”的完整攻略。

node命令行服务器(http-server)的实现

安装http-server

在命令行中输入以下命令即可安装http-server：

npm install http-server -g

启动http-server

在终端中进入要启动的网站目录，输入以下命令来启动http-server：

http-server

如果提示监听端口被占用，可以通过以下命令来指定一个新的监听端口：

http-server -p 8080

访问网站

启动http-server后，可以通过浏览器来访问网站，网址为：http://localhost:8080。其中8080为http-server监听的端口号，如果启动时指定了其他端口号，则使用指定的端口号。

跨域的实现

什么是跨域

跨域是指在浏览器端发起跨域请求，即从一个域名的网页去请求另一个域名的资源。在同一域名下，浏览器可以直接访问到相关资源。但是在不同域名下，安全策略会阻止浏览器从一个域名访问另一个域名的数据。

跨域的解决方案

JSONP

JSONP是通过script标签的src属性来跨域获取数据的一种技术。在需要跨域获取数据的网页中，通过script标签的src属性将请求发送给第三方网站，并在第三方网站中处理请求，最终将数据以回调函数的形式返回给原始网页。

示例代码：

function jsonp(url, data, success) {
    var callbackName = 'callback_' + new Date().getTime();
    data.callback = callbackName;
    var script = document.createElement('script');
    script.src = url + '?' + queryString(data);
    document.body.appendChild(script);
    window[callbackName] = function (data) {
        success(data);
        document.body.removeChild(script);
        delete window[callbackName];
    };
}
jsonp('http://www.example.com/api', {name: 'Tom', age: 20 }, function (data) {
    console.log(data);
});

在第三方网站中，可以通过接收到的请求参数来进行处理，并将数据返回给原始网页：

var express = require('express');
var app = express();
app.get('/api', function(req, res) {
     var data = req.query;
     var callbackName = data.callback;
     var dataToSendBack = { message : 'Hello ' + data.name };
     var responseText = callbackName + '(' + JSON.stringify(dataToSendBack) + ')';
     res.send(responseText);
});
app.listen(8080);

这样，由于script标签没有跨域限制，就可以成功获取第三方网站返回的数据。

CORS

CORS（Cross-Origin Resource Sharing）是一种浏览器技术，支持跨域访问资源。在服务器端，设置响应头Access-Control-Allow-Origin可以允许指定域名的跨域请求，如下：

Access-Control-Allow-Origin: http://www.example.com

在客户端发起跨域请求时，浏览器会自动add一个Origin请求头，如果服务器端检查到这个header，就可以在响应头中添加上Access-Control-Allow-Origin，以告诉浏览器该域名下的跨域请求是被允许的。

示例代码：

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/public'));
app.use('/api', function(req, res, next) {
   res.setHeader('Access-Control-Allow-Origin', 'http://www.example.com');
   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
   res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
   res.setHeader('Access-Control-Allow-Credentials', true);
   next();
});
app.get('/api', function(req, res) {
   res.json({ message: 'Hello Tom' });
});
app.listen(8080);

这样，在客户端就可以成功跨域获取数据。

以上就是node命令行服务器(http-server)和跨域的实现的完整攻略。