前端“数据代理”

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

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

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

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

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

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

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

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

}

相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅5 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
爱敲代码的小鱼6 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax