I'm using Angular 9. I have these requests to get binary image data ...
headersMultiPartForm = new HttpHeaders().set('Content-Type', 'multipart/form-data');
...
getImage(id) {
let api = `${this.endpoint}/person-library-image?id=${id}`;
return this.http
.get(api, {headers: this.headersMultiPartForm, responseType: "blob"})
.pipe(retry(this.retry), catchError(this.handleError));
}
...
results.forEach(( componentarray, key ) => {
...
this.myService.getImage(id).subscribe(data => {
...
this.createImageFromBlob(data, index);
...
}, () => {
...
});
});
I'm noticing that the requests are taking a while to complete and it seems it is because they are being blocked waiting for OPTIONS requests to complete. I would like to prevent these preflight OPTIONS requests from being sent. I thought that my "multipart/form-data" would prevent the preflight request, but apparently not ...
When I examine the actual request by right-clicking and copying as CURL I see ...
curl 'http://localhost:7071/api/person-library-image?id=127' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:81.0) Gecko/20100101 Firefox/81.0' -H 'Accept: application/json, text/plain, */*' -H 'Accept-Language: en-US,en;q=0.5' --compressed -H 'Referer: http://localhost:4200/picture-library' -H 'Content-Type: multipart/form-data' -H 'Authorization: JWT <token>' -H 'Origin: http://localhost:4200' -H 'Connection: keep-alive' -H 'Pragma: no-cache' -H 'Cache-Control: no-cache'
I have an interceptor adding the Authorization header, but I don't know where the other headers are coming from. Any ideas how I turn them off so I can prevent these preflight OPTIONS requests?