前端“数据代理”

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

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

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

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

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

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

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

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

}

相关推荐
昙鱼5 分钟前
springboot创建web项目
java·前端·spring boot·后端·spring·maven
天天进步201510 分钟前
Vue项目重构实践:如何构建可维护的企业级应用
前端·vue.js·重构
小华同学ai13 分钟前
vue-office:Star 4.2k,款支持多种Office文件预览的Vue组件库,一站式Office文件预览方案,真心不错
前端·javascript·vue.js·开源·github·office
APP 肖提莫15 分钟前
MyBatis-Plus分页拦截器,源码的重构(重构total总数的计算逻辑)
java·前端·算法
问道飞鱼26 分钟前
【前端知识】强大的js动画组件anime.js
开发语言·前端·javascript·anime.js
k093327 分钟前
vue中proxy代理配置(测试一)
前端·javascript·vue.js
傻小胖29 分钟前
React 脚手架使用指南
前端·react.js·前端框架
程序员海军41 分钟前
2024 Nuxt3 年度生态总结
前端·nuxt.js
m0_748256781 小时前
SpringBoot 依赖之Spring Web
前端·spring boot·spring
web135085886351 小时前
前端node.js
前端·node.js·vim