We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

File Upload/Download not working because of CORS policy

We have recently introduced versioning to our API.  We have updated the url, uploadUrl and downloadUrl for the FileManager control.  All 'FileOperations' calls work but the 'Upload' and 'Download' calls are returning the following message.  How can we change the headers on these calls to allow the Upload/Download to work?  Why does the introduction of api versioning cause this error (everything was working before)?

Error: (Note: the version number for the Api is now included in the url)

Access to XMLHttpRequest at 'https://xxxxx/api/v1.0/SharePoint/Upload' from origin 'http://xxxxxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 

In the Configure method of the Api's Startup.cs class we have app.UseCors("AllowAllOrigins") set.

Please let us know if you require any code examples.

Regards

James Cullis



6 Replies

SM Shalini Maragathavel Syncfusion Team June 30, 2021 08:24 AM UTC

Hi James, 

Greetings from Syncfusion support. 
                                                                        
We have validated your reported problem, but unfortunately we were unable to reproduce it at our end as the download/upload operation of File Manager component is working fine at our end.  

In our file provider services, we have used API routing to all file operations and have also enabled AllowAllOrigins in our service provider. Please, check out the following links. 



FileManager AJAX Settings reference for ASP.NET Core file provider: 

 


We have attached our validated demo sample for your reference below. 


If your reported problem still persists, then please share us the following information. 

  • Let us know which file provider service that you are using with File Manager component in your application.

Check out the following link to know the available file provider services for File Manager component. 
 
  • If possible, replicate your reported problem in the above provided sample.

This information would help us to find the exact cause of your reported problem and to provide you the prompt solution. 
Regards,  
Shalini M. 



IL Indhumathy Loganathan Syncfusion Team July 1, 2021 01:42 PM UTC



JC James Cullis July 1, 2021 03:55 PM UTC

I have included a file that contains skeleton code for the Startup.cs file from our Api, selected Controller code and the definition of the Javascript FileManager component.


All the changes we have made since introducing the Api versioning are in bold. ​Before we made these changes all calls were working correctly. Since the changes, only the actions in the 'FileOperations' route operate as expected. The 'Upload' and 'Download' (not included) of files return the error described in the original post.


For example, in the Upload ( public IActionResult Upload(string path, IList uploadFiles, string action, string data) ), the 'data' parameter is also now null, despite that value being set in the javascript.


Attachment: Synfusion_Api_Versioning_6ab20da0.rar



01/07/2021 FYI

As a test I changed the url for the FileManager component to be 'https://xxxxx/api/SharePoint/FileOperations?api-version1.0'.  The attributes on the controller were changed from

[Route("api/v{version:apiVersion}/[controller]")]

back to

[Route("api/[controller]")]


I have tested this in Postman using the a more simplified endpoint which just returns a string ('https://xxxxx/api/SharePoint/Get?api-version1.0') and this works correctly (and I can switch to another version 1.1 to return a different value for testing).


Regards


James



SS Sharon Sanchez Selvaraj Syncfusion Team July 6, 2021 02:28 PM UTC

Hi James, 
  
Sorry for the inconvenience 
We need additional time to validate your mentioned problem with the updated details. We will provide you further update within two business days, by July 8th 2021. 
  
Regards, 
  
Sharon Sanchez S. 



IL Indhumathy Loganathan Syncfusion Team July 8, 2021 12:06 PM UTC

Hi James, 
 
We have validated your reported query in File Manager component with the shared details. Currently we don’t have Share point provider support in File Manager component. So we have validated the reported scenario in Physical file provider.  
 
We have checked all file operations with api versioning v1.0 and v1.1, but unable to reproduce the CORS issue while performing upload and download operation. 
 
We suspect that you have been mapped incorrect api version in the client side sample or in the service provider.  
 
Please find the sample from below link. 
 
 
 
We also recorded api version switching and upload/ download operation behavior in the below attached video for your reference. 
 
 
Please check the shared details. If your reported issue still persist, kindly replicate the issue in the above sample and share us video footage of issue.  
 
Share us more details regarding the exact issue you have been facing. These details would help us to assist you promptly. 
 
Regards, 
Indhumathy L 



GE germyrinn October 5, 2021 06:15 AM UTC

The Same Origin Policy (SOP) is a security measure standardized among browsers. It is needed to prevent Cross-Site Request Forgery (CSRF). The "Origin" mostly refers to a "Domain". Same Origin Policy prevents different origins (domains) from interacting with each other, to prevent attacks such as CSRF (Cross Site Request Forgery) through such requests, like AJAX. In other words, the browser would not allow any site to make a request to any other site. Without Same Origin Policy , any web page would be able to access the DOM of other pages.


This SOP (Same Origin Policy) exists because it is too easy to inject a link to a javascript file that is on a different domain. This is actually a security risk ; you really only want code that comes from the site you are on to execute and not just any code that is out there.


If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.


If you need to enable CORS on the server in case of localhost, you need to have the following on request header.


Access-Control-Allow-Origin: http://localhost:9999




Loader.
Up arrow icon