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

版权声明:本文为博主原创文章,若转载请注明出处。 https://blog.csdn.net/example440982/article/details/79980853

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跨域 需要后台配合设置,非官方方法,把数据放到回调函数回调回来

    <?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
    }
  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
CmOE7V.png]
可以看到数据源的地址已经指向本地地址,虽有我用的是网上的公共接口,是允许跨域的,但是这里我只用来说明怎么用,不用纠结这个问题。


实战反向代理

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

效果如下:

Cnmbex.png]
从请求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;
        }
}

没有更多推荐了,返回首页