前端“数据代理”

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

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

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

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

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

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

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

一、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 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰4 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万4 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝4 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋4 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95274 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大4 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师4 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学4 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端