CORS issue with dotnet core and syncfusion uploader

Help Requests
1

I’ll post more info about this later if i need to. I believe this issue will ultimately go away in production but the way I’m developing my app it exists right now. I may be forced to change the way I’m developing. I have my aurelia application which i’m launching using the CLI’s au run. I have my dotnet core 2.1 web api application that I’m launching using dotnet run. Since both of these are running using their own port I needed to enable CORS. That is done with no issue. I have upload code that actually works.

The issue occurs on the aurelia/syncfusion end. When watching the network, I see my requests go out and they are returning 200s, but when watching the console, there is still a cors failure for some reason and that results in a rejected promise. The syncfusion control acts like the file upload actually failed.

The reason I say this should go away in production is because my aurelia application will be hosted on the same server as the API, but development was always meant to be standalone.

1 Like
2

Thats not much to go on, can you reproduce this to a particular request? can you share the reason of the rejected promise? Also, can you share your CORS configuration?

1 Like
3

Will do when I can, don’t have access to my code at the moment which is why there wasn’t anything in the original. I really don’t think it’s a cors config issue. I have allow my origin and all methods. The upload method on the server does get hit. It’s just about as open as it can be. I am not doing anything special on the client method either.

I’m not going to spend to much time on this as ultimately it won’t be a cors

4

CORS config

services.AddCors((options) => {
                options.AddPolicy("AllowSpecificOrigin",
                     builder => builder
                     .WithOrigins("http://localhost:8080")
                     .AllowAnyHeader()
                     .AllowAnyMethod());
            });

The issue

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:20419/api/file/upload. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Unhandled rejection Error
    Ajax</Ajax.prototype.stateChange@http://localhost:8080/scripts/vendor-bundle.js:87113:20
    Ajax</Ajax.prototype.send/promise</_this.httpRequest.onreadystatechange@http://localhost:8080/scripts/vendor-bundle.js:87029:11
From previous event:
    Ajax</Ajax.prototype.send@http://localhost:8080/scripts/vendor-bundle.js:87025:21
    _loop_4@http://localhost:8080/scripts/vendor-bundle.js:113088:13
    Uploader</Uploader.prototype.uploadFiles@http://localhost:8080/scripts/vendor-bundle.js:113096:9
    Uploader</Uploader.prototype.upload@http://localhost:8080/scripts/vendor-bundle.js:113002:7
    Uploader</Uploader.prototype.checkAutoUpload@http://localhost:8080/scripts/vendor-bundle.js:110880:11
    Uploader</Uploader.prototype.renderSelectedFiles@http://localhost:8080/scripts/vendor-bundle.js:111574:13
    Uploader</Uploader.prototype.onSelectFiles@http://localhost:8080/scripts/vendor-bundle.js:111488:9 bluebird.core.js:1417

The OPTIONS comes back as a 204 with the Access-Control-Allow-Origin: *
The actual post occurs and my method runs through to the end on the server

1 Like
5

I just placed my aurelia app inside of the .net core api app and all is well. I’d love to figure out this issue though

6

Thats odd… Would be great if we had a repo. Otherwise, can you share with us the request and response headers of both the POST and the preceding options request?

7

I’ll create a simple repo

8
9

Seems like the Upload response does not contain an Access-Control-Allow-Origin header. Hence your browser is not interpreting the response (That header needs to be present both on the OPTION response as well as the response of the actual request).

This is a problem in your ASP.NET Core code. Specifically, though your middleware is behaving as it should and is adding the CORS headers to the response, in FileController, you’re calling Response.Clear() after a succesful upload which then removes the CORS headers from the response.

10

Oh my, I copied the file upload logic from a syncfusion forum post. I feel really dumb right now. Thank you