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

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一下，找到以下几个方法：

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

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

   
   //设置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
   }

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

   * 号允许所有，根据要求设置

3. webpack工具 配置接口代理，原理是通过反向代理，此处不做细说，更多详情请Google，相信我，不要baidu

4. 本地配置反向代理服务器，解决同源策略的问题，正向代理服务器也可以获取数据

   搞不清正向代理和反向代理的看这里 前端开发如何独立解决跨域问题

5. http-server 基于node的零配置http server服务器

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

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

配置代理步骤：

1. 安装node，因为http-server是基于node的 npm i http-server -g
2. 查看帮助说明 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 更新一些细节点，做详细说明

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;
        }
}