Angular项目中外部加载的js的ngx-trans的Cors问题

Question

首先，本文：我们有一个Angular项目（称为“项目X”），该项目具有自己的json转换文件（已加载ngx-translate）。然后将该项目移植为Angular Elements（整个内容移植到单个js文件，称为“ my-lib.js”）。另一个项目（“项目Y”）动态加载此脚本，因此可以在其中使用项目X的“角度元素”。 Project Y还利用自己的ngx-translate加载的json转换文件。

Project X构建到/ dist，并且将Project X的json转换文件复制到/ dist / i18n内。然后，此/ dist文件夹在端口3003（即http://localhost:3003）上与lite-server一起提供。在bs-config.json文件中，指定了此端口，并且还指定了“ cors：true”：

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

然后还提供了项目Y（“ ng服务”）。默认语言是英语。因此，正确加载了项目Y中的en.json文件！但是...项目X的en.json文件不是... [en.json“托管在http://localhost:3003/i18n/en.json上，我可以通过url访问它。但是在项目Y中，我得到了cors错误，如下所示：

内部项目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错误？预先感谢！

Answer 1

很幸运自己找到了答案！看来我有一个添加了额外HttpHeaders的HttpInterceptor，这就是为什么它发送预检请求的原因（这引起了cors问题）！当它是一个简单的GET请求时，不会发送预检请求，但是当您向请求添加某些HTTP标头时，浏览器会发送一个预检请求。因此，TLDR：从HttpInterceptor中删除了多余的http标头！像魅力一样工作：-）！