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 将接口代理到本地
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
数据是通过代理获取过来的。
2018/4/18 更新一些细节点,做详细说明
Nginx 反向代理
Nginx反向代理设置示例
server {
listen 8890;
server_name 192.168.0.147 ;
root "D:\webproject\hpl\4thmeirongdahui";
location /api/Weixin/questionnaire/setMessage { # 设置匹配url
#rewrite ^/api/(.*)$ /$1 break; # 测试环境uri添加/api标记
proxy_pass http://hfc.suoluomei.com/hpl/index.php?s=/Weixin/questionnaire/setMessage; # 代理地址
}
# 根目录匹配
location / {
if (!-e $request_filename) {
rewrite ^(.*)$ /index.php?s=/$1 last;
break;
}
index index.html index.htm index.php;
#autoindex on;
}
# 匹配.php文件并处理
location ~ \.php(.*)$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
include fastcgi_params;
}
}