Angular项目中无法发布src下config.json至应用域名的问题求助

正确托管config.json的配置方法 #

你之前把config.json当作样式文件配置的思路是错的，Angular有专门的静态资源托管配置项，正确做法是修改angular.json中的assets数组：
找到项目对应的build配置节点（路径：projects -> [你的项目名称] -> architect -> build -> options），将src/config.json添加到assets列表中：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/config.json"
]

执行ng build后，config.json会被复制到dist目录的根路径下，和index.html同级，此时可以通过应用域名直接访问（比如https://your-mfe-domain/config.json）。

解决CORS错误的方案 #

如果配置静态资源后仍出现CORS错误，说明Shell应用和MFE部署在不同域名下，可通过以下方式解决：

• 同域名部署：将Shell和MFE部署在同一域名的不同子路径下（比如Shell在https://app.com/，MFE在https://app.com/mfe/），这样请求config.json时不会触发跨域。
• 服务器配置CORS：在MFE的部署服务器（如Nginx）中添加跨域允许的响应头，以Nginx为例：

server {
  # 其他配置...
  add_header Access-Control-Allow-Origin "https://your-shell-domain.com";
  add_header Access-Control-Allow-Methods "GET, OPTIONS";
  add_header Access-Control-Allow-Headers "Content-Type";
}

• 开发环境代理：如果是本地开发阶段，可在MFE项目中创建proxy.conf.json，将Shell的config请求代理到MFE的资源路径，再在angular.json的serve配置中引入代理文件：

// proxy.conf.json
{
  "/config.json": {
    "target": "http://localhost:4200",
    "secure": false
  }
}

注意事项 #

在MFE模块中请求config.json时，建议使用绝对路径（如/config.json），确保请求路径指向正确的托管位置。

内容的提问来源于stack exchange，提问作者Avtandil Merebashvili