Выдача Cors на ngx-translate загруженного извне js в Angular проекте - PullRequest
Новая
       35

Выдача Cors на ngx-translate загруженного извне js в Angular проекте

0 голосов
/ 03 марта 2020

Сначала немного контекста: у нас есть проект Angular (назовите его «проект X»), который имеет свои json файлы перевода (загруженные с помощью ngx-translate). Затем этот проект переносится как Angular Elements (все это переносится в один js файл, назовите его «my-lib. js»). Другой проект («проект Y») динамически загружает этот скрипт, так что Angular Элементы проекта X могут использоваться внутри него. Project Y также использует собственные файлы перевода json, загруженные с помощью ngx-translate.

Project X создается в / dist, а файлы перевода json для проекта X копируются в / dist / i18n. Эта папка / dist затем обслуживается с помощью lite-сервера через порт 3003 (т. Е. http://localhost: 3003 ). В файле bs-config. json указан этот порт, а также "cors: true": 

{
    "port": 3003,
    "files": ["./src/**/*.{html,htm,css,js,json}"],
    "server": { "baseDir": "./dist" },
    "cors": true
}

Затем также обслуживается проект Y ("ng serve"). Язык по умолчанию - Engli sh. Таким образом, файл en. json внутри проекта Y загружен правильно! Но ... файл en. json проекта X не ... "en. json" размещен на http://localhost: 3003 / i18n / en. json, и я можно получить доступ к нему по URL. Но в рамках проекта Y я получаю ошибку cors, как в:

enter image description here

Внутри проекта X модуль ngx-translate импортируется в AppModule следующим образом: 

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, environment.production ? '/objt-lib/assets/i18n/' : (environment.staging ? 'http://localhost:3003/i18n/' : '/assets/i18n/'), '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserTransferStateModule,
    BrowserModule,
    AppRoutingModule,
    ...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      }
    }),
    BrowserAnimationsModule
  ],
  providers: [
    ...
  ],
  bootstrap: environment.production ? [] : [AppComponent]
})
// export class AppModule { }
export class AppModule implements DoBootstrap {
   ....
}

Внутри проекта Y он импортируется следующим образом: 

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    AppRoutingModule,
    ...
    BrowserAnimationsModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    HttpClientModule
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
  }
}

Почему я получаю ошибку cors? Заранее спасибо!

1 Ответ

0 голосов
/ 04 марта 2020

К счастью, нашел ответ сам! Похоже, у меня был HttpInterceptor, который добавил дополнительные HttpHeaders, поэтому он отправлял предпечатный запрос (который вызывал проблему cors)! Предварительный запрос не отправляется, когда это простой запрос GET, но когда вы добавляете в запрос определенные HTTP-заголовки, браузер отправляет предварительный запрос. Итак, TLDR: удален дополнительный заголовок http из HttpInterceptor et voila! Работал как шарм: -)!

...