在 Angular 前端啟用 CORS

Question

我有一個微前端在端口 4200 上運行，另一個在 4201 上運行。我嘗試拆分翻譯文件並想加載兩個應用程序翻譯，所以我編寫了一個自定義加載器，它向端口 4201 發出 http 請求：

export const scope = function(http: HttpClient) {
  const loader =  ['en', 'de'].reduce((acc: any, lang: string) => {
    acc[lang] = () => firstValueFrom(http.get(`http://localhost:4201/assets/i18n/fields/${lang}.json`));
    return acc;
  }, {});
  return {scope: 'fields', loader: loader}
};

@NgModule({
  declarations: [RootComponent],
  imports: [
    CommonModule,
    RootRoutingModule,
    FormsModule,
    SharedModule.forRemote(environment),
    TranslocoModule
  ],
  providers: [
    {
      provide: TRANSLOCO_SCOPE,
      deps: [HttpClient],
      useFactory: scope
    }
  ]
})
export class RootModule { }

這兩個應用程序都是 javacript 前端，因此 CORS 阻止了它。 我怎樣才能忽略前端的核心？

Answer 1

https://levelup.gitconnected.com/fixing-cors-errors-with-angular-cli-proxy-e5e0ef143f85

這篇文章幫助了我。 在前端啟用 CORS 是一種解決方法。 但請注意，這只是一種解決方法，在我的情況下這是必要的，因為我正在將翻譯文件從一個微前端加載到應用程序 shell。