前端“数据代理”

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

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

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

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

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

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

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

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

}

相关推荐
anyup_前端梦工厂1 小时前
了解几个 HTML 标签属性,实现优化页面加载性能
前端·html
前端御书房2 小时前
前端PDF转图片技术调研实战指南:从踩坑到高可用方案的深度解析
前端·javascript
2301_789169542 小时前
angular中使用animation.css实现翻转展示卡片正反两面效果
前端·css·angular.js
风口上的猪20153 小时前
thingboard告警信息格式美化
java·服务器·前端
程序员黄同学3 小时前
请谈谈 Vue 中的响应式原理,如何实现?
前端·javascript·vue.js
爱编程的小庄4 小时前
web网络安全:SQL 注入攻击
前端·sql·web安全
宁波阿成4 小时前
vue3里组件的v-model:value与v-model的区别
前端·javascript·vue.js
柯腾啊5 小时前
VSCode 中使用 Snippets 设置常用代码块
开发语言·前端·javascript·ide·vscode·编辑器·代码片段
weixin_535854225 小时前
oppo,汤臣倍健,康冠科技,高途教育25届春招内推
c语言·前端·嵌入式硬件·硬件工程·求职招聘
扣丁梦想家5 小时前
设计模式教程:装饰器模式(Decorator Pattern)
java·前端·装饰器模式