S3 json文件的Angular HTTP GET选项返回403

Question

我正在尝试从S3获取翻译文件，但从AWS接收到错误代码403。

我正在使用ngx-translte库来翻译网站，我实现了自己的自定义翻译加载器。但是我仍然在get选项上得到403（据我所知，这是Chrome请求）

import { Injectable } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';

@Injectable()
export class HttpTranslateLoaderService implements TranslateLoader {
    contentHeader = new HttpHeaders({ "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });

    constructor(private http: HttpClient) { }
    getTranslation(lang: string): Observable<any> {
        var apiAddress = environment.bucketUrl + "mobile/assets/i18n/" + lang + ".json";
        return Observable.create(observer => {
            this.http.get(apiAddress, { headers: this.contentHeader }).subscribe((res: Response) => {
                observer.next(res.json());
                observer.complete();
            },
                error => {
                    //  failed to retrieve from api, switch to local
                    this.http.get(`/assets/i18n/${lang}.json`).subscribe((res: Response) => {
                        observer.next(res.json());
                        observer.complete();
                    })
                }
            );
        });
    }
}

已检查所有AWS权限问题

我希望收到具有公共访问权的文件，但仍然会出现禁止访问的错误

Answer 1

最终我解决了这个问题！

我不知道这是否正确，但对我有用。

不是使用有角度的http服务，而是使用内置的访存函数并用rxjs的from函数包围。

更新的翻译加载器

import { Injectable } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable, of, from } from 'rxjs';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { environment } from 'src/environments/environment';

@Injectable()
export class HttpTranslateLoaderService implements TranslateLoader {
    contentHeader = new HttpHeaders({ "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
    httpParams = new HttpParams().set('cacheblock', 'true')
    constructor(private http: HttpClient) { }
    getTranslation(lang: string): Observable<any> {
        var apiAddress = environment.bucketUrl + "mobile/assets/i18n/" + lang + ".json";
        return Observable.create(observer => {
            from(fetch(apiAddress)).subscribe((res: Response) => {
                observer.next(res.json());
                observer.complete();
            },
                error => {
                    //  failed to retrieve from api, switch to local
                    this.http.get(`/assets/i18n/${lang}.json`).subscribe((res: Response) => {
                        observer.next(res.json());
                        observer.complete();
                    })
                }
            );
        });
    }
}