Changing OPTIONS request headers on Upload Control

[Matt]

Hi,

Is it possible to append the Request Header for the OPTIONS Request Method that happens during the Upload Sequence?

I have done the following, however, it does not affect the OPTIONS request.

1.uploadEventHandler(e: UploadEvent) {
2.    e.headers.set('Access-Control-Request-Headers', 'authorization');
3.    e.headers.append('Authorization', 'Bearer ' + abp.auth.getToken());
4.  }

 

Basically, on the initial request for OPTIONS, I need to append "Access-Control-Request-Headers: authorization"

Thanks!

Background: I'm using another file control currently that is working well, however I am transitioning everything over to Kendo. When I try to replace the control with the Kendo Upload, I get the following. Tech is Angular, ASP.NET CORE (ABP actually)

Failed to load http://localhost:22742/File/UploadFiles: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

 

[Ivan]

Hi Matt,

According to this document, the Access-Control-Request-Headers header cannot be set. Browsers will omit this header as a security risk according to this spec.

Is it vital for your authorization scheme? 

Regards,
Ivan
Progress Telerik

[Matt]

Hi Ivan,

Thank you for the response and providing those links.Ultimately, it was a misconfiguration on the server (in .net core) along with a misconception of the Upload API. I am not an expert on CORS, though I was able to figure it out.

For anyone else who gets this issue the fix was setting what origins can perform CORS, and appending "AllowCredentials" (see the code example below). This was an issue on the default configuration of ASP NET Boilerplate

To Fix the ASP Core Side:

Line 9 must be commented out, this is to prevent any origin from accessing your API

Line 10 Append in the Origins you expect

Line 11 This will allow credentials to be passed back.

01.//Configure CORS for angular2 UI
02.            services.AddCors(options =>
03.            {
04.                options.AddPolicy(DefaultCorsPolicyName, builder =>
05.                {
06.                    //App:CorsOrigins in appsettings.json can contain more than one address with splitted by comma.
07.                    builder
08.                        //.WithOrigins(_appConfiguration["App:CorsOrigins"].Split(",", StringSplitOptions.RemoveEmptyEntries).Select(o => o.RemovePostFix("/")).ToArray())
09.                        //.AllowAnyOrigin() //TODO: Will be replaced by above when Microsoft releases microsoft.aspnetcore.cors 2.0 - https://github.com/aspnet/CORS/pull/94
10.                        .WithOrigins("http://localhost:4200")
11.                        .AllowCredentials()
12.                        .AllowAnyHeader()
13.                        .AllowAnyMethod();
14.                });
15.            });

 

To Fix the FileUpload side on Angular

before: (non working)

uploadEventHandler(e: UploadEvent) {
    e.headers.append('Authorization', 'Bearer ' + abp.auth.getToken());
  }

 

after: (working)

uploadEventHandler(e: UploadEvent) {
    e.headers = e.headers.append('Authorization', 'Bearer ' + abp.auth.getToken());
  }

 

Thanks again

Matt

[Duncan]

Thanks for posting that Matt. Got me out of a hole.