Angular HTTP GET 选项 return S3 json 文件的 403

Question

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

我正在使用 ngx-translte 库翻译网站，我实现了自己的自定义翻译加载器。但我在获取选项时仍然得到 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 权限问题

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

Answer 1

最终我解决了这个问题！

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

我没有使用 angular http 服务，而是使用了内置的 fetch 函数和 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();
                    })
                }
            );
        });
    }
}

Angular HTTP GET 选项 return S3 json 文件的 403

Angular HTTP GET option return 403 for S3 json files

amazon-s3

ngx-translate

angular