前端“数据代理”

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

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

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

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

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

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

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

一、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 '服务地址';

}

相关推荐
m0_敲代码的彭于晏16813 小时前
Vercel 前端部署平台深度评测
前端
怕浪猫14 小时前
外包和大厂的前端代码,差在凌晨三点
前端·面试·github
m0_敲代码的彭于晏16814 小时前
Vercel 前端部署与全栈开发实战指南
前端·状态模式
徐小夕15 小时前
花了3个月,我们做了一款 AI 版的“飞书文档”
前端·算法·github
贾伟康15 小时前
【化学实验室|17】HarmonyOS ArkTS 亮暗色与视觉令牌实战:集中颜色、间距和交互状态避免页面割裂
前端·移动开发·harmonyos·arkts·arkui
Csvn16 小时前
SSR/SSG/ISR(上):峡谷与渲染策略的时间预算
前端
Csvn16 小时前
SSR/SSG/ISR(下):可交互性、新鲜度与回源账
前端
Elcker18 小时前
YnuoAgent(依诺):一个 npm 包,跑起属于自己的 AI 研发平台
前端·人工智能·npm
计算机魔术师19 小时前
发现2天,修复2个月:AI挖穿PHP后,卡兹克讲透攻防时间差
前端
风骏时光牛马19 小时前
测试标题001
前端