场景

某汽车制造企业，财务管理系统和库存系统有部分业务需要整合

业务组件定义

例如：库存系统的BOM，即物料清单，需要提供一个选择器（bomPicker）来给财务系统使用，以便在财务核销中选取库存物料

问题

库存前端前端开发了bomPicker，并取到域名为https://store.car.com/bom/query提供的接口数据，打包成组件并发到公司的npm源上 @store/bomPicker

财务前端安装这个组件

yarn add -D @store/bomPicker

并在其站点为http://finance.car.com页面使用,由于bomPicker使用了https://store.car.com，造成了跨域

解决

1. 生产者解决问题思路

https://store.car.com/bom/query接口中配置允许来自https://store.car.com跨域，

例如egg.js

config.security = {
    domainWhiteList:["https://store.car.com"]
};

1. 消费者解决问题思路

重新设计bomPicker

去掉接口url中的https://store.car.com，只保留路由/bom/query

新增props，例如为transferRoute的属性，传入string，例如：storeapi

bomPicker拼接路由为/storeapi/bom/query

这样组件的请求完整地址为：

https://store.car.com/storeapi/bom/query

在http://finance.car.com站点应用中对 /storeapi/进行转发到https://store.car.com

nginx

server {
		listen 80;
		server_name  localhost;

		location /storeapi/  {
			proxy_pass  https://store.car.com/;
		}
	 }

express实现

app.use('/storeapi', proxy({
   target: 'https://store.car.com', // 目标代理地址
   changeOrigin: true,
   pathRewrite: {
       '^/storeapi': ''
   }  
}))

结尾

当然本文的论点在于两个不同的系统使用的不同域名服务，现实中企业应该有服务治理平台之类的基础建设，能很好的规避此类问题！