如果请求中有大 blob，Angular 8 将无法从请求中读取响应

Question

我正在开发一个 API，它有一个端点来更新一个大 blob（15MB 左右）的表，这个 api 更新表然后用 JSON 响应。

当这个端点收到一个小的 blob（几个字节）时，angular 可以读取 JSON 并将结果显示给用户。 如果此端点收到一个大 blob，则整个请求似乎都失败了，如 Firefox 在控制台中显示的那样：

我不认为这是 CORS 问题，因为我向该服务器发出的所有其他请求都可以，如果 blob 足够小，即使这个请求也可以。

我正在使用 Angular 8、Python 3（带 Flask）和 Mysql，但我认为这不是数据库或服务器端配置的问题（例如，mysql 的 max_allowed_pa​​cket 或 innodb_log_file_size 和 nginx 的 client_max_body_size），因为服务器接收这些插入端点中的文件完全相同，一切都很好。 如果我保存了一个 15MB 的文件，它会成功，但如果我尝试用另一个大小完全相同的文件更新该文件，则会出现错误。

另一件让我相信问题不在服务器端的事情是 nginx 访问日志只显示成功的请求（都以代码 200 响应）

所以我认为问题只能是 Angular，但由于它在 blob 很小的情况下有效，我完全不知道问题可能出在哪里。

这是发出请求的服务：（插入适用于所有大小的 blob，仅更新小 blob）

export class documentService {

    constructor(private http: HttpClient, private toastr: ToastrService) { }

    insert(file:File, tags:Tag[], permitions:User[], extraFields:any, type:string){
        const formData = new FormData();
        formData.append('tags', JSON.stringify(tags));
        formData.append('permitions', JSON.stringify(permitions));
        formData.append('binary_data', file);
        formData.append('extraFields', JSON.stringify(extraFields))

        return this.http.post<Resposta>(SERVER+"/document/"+type, formData, {"reportProgress": true})
    }

    update(file:File, tags:Tag[], permitions:Usuario[], docId, extraFields:any, type:string){
        const formData = new FormData();
        formData.append('tags', JSON.stringify(tags));
        formData.append('permitions', JSON.stringify(permitions));
        formData.append('binary_data', file);
        formData.append('extraFields', JSON.stringify(extraFields))
        return this.http.put<Resposta>(SERVER+"/document/"+type+"/"+docId, formData, {"reportProgress": true})
    }
}

这是使用上述服务的组件的一部分：

this.docService.update(file, tags, permitions, this.doc.id,this.doc, TYPES.INTERNAL).subscribe( r => {
    if(!r.error){
        this.setEditMode(false)
        this.hide()
    }
})

而且我还有一个拦截器：

export class ApiInterceptor implements HttpInterceptor {
    constructor(private toastr: ToastrService, private progress: ShowProgressService) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        let newHeaders = { 'Authorization': localStorage.getItem('jwt') || ""}
        const cloneReq = req.clone({
            setHeaders: newHeaders
        });


        return next.handle(cloneReq).pipe(
            tap((event: any)=>{
                if(event.body && event.body.msg && event.body.error!=undefined){
                    if(event.body.error){
                        this.toastr.error(event.body.msg)
                    } else{
                        this.toastr.success(event.body.msg)
                    }
                }

                // shows upload progress
                if(event.type === HttpEventType.UploadProgress){
                    let percentDone = Math.round((100 * event.loaded) / event.total);
                    this.progress.showUpload(percentDone)

                }

                if(event.type === HttpEventType.DownloadProgress){
                    let percentDone = Math.round((100 * event.loaded) / event.total);
                    this.progress.showDownload(percentDone)
                }

            })
        );
    }
}

编辑 1 - 选项请求：

要求：

Host: url
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0
Accept: */*
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: authorization
Referer: http://url/dashboard
Origin: http://url
DNT: 1
Connection: keep-alive

回复：

HTTP/1.1 200 OK
Server: nginx/1.10.3
Date: Thu, 13 Feb 2020 20:30:39 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 0
Connection: keep-alive
Allow: GET, HEAD, PUT, OPTIONS, DELETE
Access-Control-Allow-Origin: http://url
Vary: Origin
Access-Control-Allow-Headers: authorization
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT

Answer 1

根据您添加的 OPTIONS 响应，您似乎没有正确设置服务器对 CORS OPTIONS 请求的响应中的Access-Control-Allow-Origin标头。

尝试在服务器的响应中设置Access-Control-Allow-Origin: *以查看 CORS 是否是问题，然后将*通配符替换为您将使用的适当来源，以防止潜在的恶意跨源请求