Angular微前端跨域（CORS）问题处理：解决不同端口翻译文件加载的跨域拦截

阿华AIGC实验室

2026-4-28

嘿，这个跨域问题在微前端场景里太常见了！结合你的Angular项目，我给你几个实用的前端侧解决方案，帮你搞定这个问题：

1. 开发环境：用Angular代理配置绕开CORS

这是开发阶段最方便的解决方案，原理是让Angular的开发服务器帮你转发请求，浏览器看到的就是同域请求，自然不会触发CORS拦截。

步骤如下：

在4200端口的项目根目录新建proxy.conf.json文件，添加代理规则：

{
  "/assets/i18n/fields/*": {
    "target": "http://localhost:4201",
    "secure": false,
    "changeOrigin": true
  }
}

修改angular.json里的serve配置，启动时指定代理文件：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "proxyConfig": "proxy.conf.json"
    }
  }
}

最后调整你的自定义加载器代码，把绝对URL改成相对路径：

acc[lang] = () => firstValueFrom(http.get(`/assets/i18n/fields/${lang}.json`));

重启4200的开发服务器，现在请求就会被代理到4201，跨域问题解决！

2. 生产环境：统一域名或利用反向代理

生产环境下，纯前端没办法直接绕过CORS（浏览器的同源策略是硬限制），但可以通过部署层面的调整来避免跨域：

同域名部署：把两个应用部署在同一个域名下，比如主应用（4200）部署在https://your-domain.com，子应用（4201）部署在https://your-domain.com/app2，这样直接用相对路径请求翻译文件就行。
反向代理：用Nginx这类工具做反向代理，把https://your-domain.com/app2/assets/...的请求转发到4201的服务器，前端依然用相对路径请求，完全不用改代码。

3. 利用微前端框架的资源共享机制（推荐）

如果你用了Module Federation、Single SPA这类微前端框架，可以直接把4201的翻译文件作为共享模块暴露，4200直接导入，根本不需要HTTP请求，从根源上避免跨域：
比如用Module Federation的话，在4201的webpack.config.js里配置暴露资源：

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'fieldsApp',
      filename: 'remoteEntry.js',
      exposes: {
        './i18n-en': './src/assets/i18n/fields/en.json',
        './i18n-de': './src/assets/i18n/fields/de.json'
      }
    })
  ]
};

然后在4200的项目里修改加载器代码，动态导入共享模块：

export const scope = function() { 
  const loader = ['en', 'de'].reduce((acc: any, lang: string) => { 
    acc[lang] = async () => {
      const translationModule = await import('fieldsApp/i18n-' + lang);
      return translationModule.default;
    };
    return acc; 
  }, {}); 
  return {scope: 'fields', loader: loader} 
};

这样既避免了跨域，又符合微前端的资源共享理念，非常适合你的场景。