前端“数据代理”

讲数据代理之前我们先闲聊一下“同源数据”与“数据认可”。世间的一切在形成人文语言泛指的事物时，我们都会为其"下定义"，下定义之前我们都会用形形色色的条件对其限制与说明。通过这种下定义的方式我们得到了不同事物在语言上的定义，事物的概念定义从而得到各色各样的语言说明。

而这些通过定义得到说明或泛指在计算机领域我们可以通过自己的规则(下定义)将其录入并进行使用，也就是我们所谓的数据。

国与国之间的交流大多以人文认可或利益等价为驱动，也就是说“认可”驱动国与国之间的交流。

民族与民族之间的融合因为“包容”与对“美好事物”的追求而产生“可行”，这是民族文化之间的相互理解与相互吸引而走在一起，并在漫长的时间长河中让人们相互“认可”，并产生“同源”文化的心灵防线；

同样的当我们对自己所属行业的形形色色数据进行规则限制与数据交流时，我们就会将其划分不同的归属，从而得到一个大范围的“数据生态”定义；

不同的“数据生态”有着自己的数据生态规则，而这些规则也就是我们各个应用的产品定义，符合产品所定义的生态数据将得到系统认可(收录)，被同一个系统(数据生态)认可的各种数据我们可将他们称为“同源数据”，对同源数据做限定也就是我想说的数据“数据认可”；

从上面的闲聊中我们可以看到从大到小的定义，将数据划分成形形色色的“数据生态”，并制定规则加以限制。而今天我我想说的"数据代理"就是打破这一规则的手段与方法，接下我将把各语言的“数据代理”方法一一呈现；

一、angular配置本地开发代理（方法一）

数据代理通俗理解就是找条合适自己的路绕过“大山”或者是制造假的身份令牌通关。

1.1、修改本地可访问主机限制

修改angular本地开发运行命令让外部主机可以访问自己主机服务

文件地址：/package.json

"start": "ng serve --host 0.0.0.0 --proxy-config=proxy.conf.json",

1.2、添加本地代理服务配置

文件名称：proxy.conf.json

文件地址：/proxy.conf.json
配置内容：

{
    "/int/pos-web-bff-hkg4/": {
      "target": "https://hk-uat-api.ap.manulife.com",
      "changeOrigin": true,
      "secure": false
    }
  }

二、nginx开发代理（方法二）

2.1、修改本地可访问主机限制

修改angular本地开发运行命令让外部主机可以访问自己主机服务

文件地址：/package.json

"start": "ng serve --host 0.0.0.0 ",

2.2、设置本地端口监听代理转发

location / {
            root   html;
            index  index.html index.htm;
            # 设置是否允许 cookie 传输
            add_header Access-Control-Allow-Credentials true;
            # 允许请求地址跨域 * 做为通配符
            add_header Access-Control-Allow-Origin * always;
            # 允许跨域的请求方法
            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            proxy_pass http://localhost:4200;
        }

2.3、设置服务端服务代理

location /int/pos-web-bff-hkg {
            # 设置是否允许 cookie 传输
            add_header Access-Control-Allow-Credentials true;
            # 允许请求地址跨域 * 做为通配符
            add_header Access-Control-Allow-Origin * always;
            # 允许跨域的请求方法
            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            proxy_pass ‘服务地址’;
        }