http-server 超轻量级web服务器

目前大多数开发都是前后端分离，后台写好api，前台通过api拿到数据然后渲染，但是由于浏览器的同源策略，不允许跨域访问数据，前台测试会比较麻烦，无法拿到数据，正式的部署不会有这个问题。

前端分离开发经常会遇到这样的场景：

前端妹纸：怎么数据又获取不到了，后台设置一下跨域

有的时候做前端，想要运行一些代码，但是又没有必要使用tomcat或者Apache http server，这个时候一个轻量级的简单的http server就可以搞定了。

Http-server是基于nodejs的http服务器，它最大好处就是：

　　可以使任意一个目录成为服务器的目录，完全抛开后台的沉重工程，直接运行想要的js代码。

// 配置API接口地址
var root = 'https://cnodejs.org/api/v1'

这里，我们将接口地址写死了。
当然，这并不是最重要的事情，而是 cnodejs.org 帮我们把接口处理得很好，解决了跨域的问题。而我们的实际项目中，很多接口都是不允许我们这样跨域请求的。
而我们的开发环境下，不可能跑到服务器上直接开发，或者在本地直接搞一个服务器环境，这样就违背了我们前后端分离开发的初衷了。
如何解决这个问题呢？其实非常好办，要知道跨域不是接口的限制而是浏览器为了保障数据安全做的限制。因此，一种方法可以解决，那就是打开浏览器的限制，让我们可以顺利的进行开发。但是无奈的是，最新的 chrome 浏览器好像已经关闭了这个选项，那么我们只能采用另外一种方法了——将接口代理到本地。
参考：https://blog.csdn.net/FungLeo/article/details/77601761

为了解决这个问题，Google一下，找到以下几个方法：

看完这篇文章，妈妈再也不用担心前台获取不到数据啦

jsonp跨域需要后台配合设置，非官方方法，把数据放到回调函数回调回来

<?php
//设置callback函数(如：js的user()方法)
$jsonp = 'users';
//需要获取的数据
$data = array('id'=>, 'name'=>'hotsuitor');
//转为json
$dataToJson = json_encode($data)

//api函数
function getUsers($data){
 return $data
}
getUsers($dataToJson);

function users(res)
{
   let id = res.id
   let name = res.name
}

CORS跨域设置header('Access-Control-Allow-Origin: *')

* 号允许所有，根据要求设置
webpack工具配置接口代理，原理是通过反向代理，此处不做细说，更多详情请Google，相信我，不要baidu
本地配置反向代理服务器，解决同源策略的问题，正向代理服务器也可以获取数据

搞不清正向代理和反向代理的看这里前端开发如何独立解决跨域问题
http-server 基于node的零配置http server服务器

下面重点讲解http-server 简单方便，即配即用，不用繁琐的配置，非常适合前端用来作为web服务器

http-serve官网也可是实现代理

配置代理步骤：

安装node，因为http-server是基于node的 npm i http-server -g
查看帮助说明 http-server -h

http-server -p 3000 -P https://condejs.org
//-p 本地运行端口  -P 代理地址（就是要访问的接口下的域名）

实现效果如下：
图中的ip 192.168.0.147 是我本机的局域网ip，等同与 localhost 127.0.0.1
]
可以看到数据源的地址已经指向本地地址，虽有我用的是网上的公共接口，是允许跨域的，但是这里我只用来说明怎么用，不用纠结这个问题。

实战反向代理

GitHub地址

实现一个代理文件名为app.js

// include dependencies
var express = require("express");
var proxy = require("http-proxy-middleware");

var app = express();

app.use("/api", proxy({ target: "https://cnodejs.org", changeOrigin: true }));

app.listen(3000);

启动

node app.js

浏览器访问localhost:3000/api 就会获取到 cnodejs官网的数据，

使用相对路劲的api，直接点击也会通过代理跳转拿到数据

http-proxy-middleware 将接口代理到本地

http-proxy-middleware

example:

var express = require('express');
var proxy = require('http-proxy-middleware');

var app = express();

app.use('/api', proxy({target: 'https://cnodejs.org', changeOrigin: true}));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://cnodejs.org/api/foo/bar

效果如下：

]
从请求url中可以看出来，浏览器请求的地址是本地的 localhost:3000 数据是通过代理获取过来的。

更多详细信息，请参考http-proxy-middleware官网或者GitHub

2018/4/18 更新一些细节点，做详细说明

前端跨域请求终极解决方案 http-server 超轻量级web服务器 http-proxy-middleware 将接口代理到本地

http-server 超轻量级web服务器

实战反向代理

http-proxy-middleware 将接口代理到本地

猜你喜欢