-3

I have a microfrontend running on port 4200, and the other one on 4201. I tried splitting up the translation files and would like to load both of the applications translations, so I wrote a custom loader that is making an http request to port 4201:

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 { }

Both applications are javacript frontends, hence CORS blocks it. How can I ignore cores in the frontend?

Stefan
  • 1,122
  • 3
  • 14
  • 38
  • You cannot "ignore" CORS. It's fundamental browser security. – Pointy May 19 '22 at 14:38
  • Does this answer your question? [Response to preflight request doesn't pass access control check](https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check) –  May 19 '22 at 14:40
  • @E.Maggini , No. – Stefan May 19 '22 at 14:48
  • 1
    Just add the correct accept headers to the server that's serving up your destination data. – Alicia Sykes May 19 '22 at 14:52
  • 1
    Do you control the the app that listens on port `4201`? if so, simply return an appropriate Access-Control header, something like `Access-Control-Allow-Origin: http://localhost:4200`, if it's only accessed from that origin. – Yarin_007 May 19 '22 at 14:54
  • @Stefan Actually, yes it does. You have asked how to ignore CORS....that posting shows how. –  May 19 '22 at 15:38
  • @Yarin_007, yes and no. It is another angular application and I want to access the translation files – Stefan May 19 '22 at 15:45
  • What do you mean? What's serving the angular code? What server are you using? **Is there some kind of api?** Or are you trying to scrape html? – Yarin_007 May 19 '22 at 16:31

1 Answers1

-1

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

This article helped me. It is a workaround to enable CORS in the frontend. But be warned this is just a workaround and in my case it was neccessary because I was loading translation files from one microfrontend to the app shell.

Stefan
  • 1,122
  • 3
  • 14
  • 38