Repository navigation
LargeFileUploadTask cors error #265
Description
Activity
Digging through the source I found that the issue was caused by headers appended by the
TelemetryHandler.tswhich is a middleware attached right before the request is sent. These headers were only causing issues with chunk uploads that were being sent with thePUTmethod tohttps://api.onedrive.com/rup/<...>/<...>.My current workaround was to initialize the middleware chain myself as follows. This way bypassing the
TelemetryHandlermiddleware. There should be a way to eliminate this boilerplate code. Maybe by adding options that allow api users to control the default middleware chain constructed by theHTTPClientFactory. Or control over which headers are sent with an api request. Please let me know if such a solution already exists.const authenticationHandler = new AuthenticationHandler(authProvider); const retryHandler = new RetryHandler(new RetryHandlerOptions()); const httpMessageHandler = new HTTPMessageHandler(); authenticationHandler.setNext(retryHandler); retryHandler.setNext(httpMessageHandler); let client = Client.initWithMiddleware({ middleware: authenticationHandler });
We need to not send the sdkversion header when we redirect to non Microsoft graph endpoints. This is applicable to all SDKs. Note that this is for personal.
Reacted by malinkodySo whats the best to initialize the client if you have accessToken already. Is the above approach mentioned by malinkody is the way to upload large files?
Muthurathinam (@muthurathinam) Do you have any update on this? I am kind of blocked on this issue
the same issue occurs with other headers like
client-request-id, when talking toapi.onedrive.com, i.e. all the headers added by TelemetryHandlerThank you malinkody !
Workaround works for me as wellpublic static createWithAuthenticationProvider(authProvider: AuthenticationProvider): HTTPClient { const authenticationHandler = new AuthenticationHandler(authProvider); const retryHandler = new RetryHandler(new RetryHandlerOptions()); const httpMessageHandler = new HTTPMessageHandler(); authenticationHandler.setNext(retryHandler); if (isNodeEnvironment()) { const redirectHandler = new RedirectHandler(new RedirectHandlerOptions()); retryHandler.setNext(redirectHandler); redirectHandler.setNext(httpMessageHandler); } else { retryHandler.setNext(httpMessageHandler); } return HTTPClientFactory.createWithMiddleware(authenticationHandler); }
Solution would be either to change server-side CORS to allow those headers
or to re-implement telemetry in different way that does not send those headers.FWIW, we tried changing this by unsetting the telemetryHandler like so -
authenticationHandler.setNext(exceptionRetryHandler); exceptionRetryHandler.setNext(retryHandler); retryHandler.setNext(httpMessageHandler);Yet, we are seeing the errors with - name: TypeError, message: Failed to fetch. Not sure if this is CORS related though..
I will take a look at this shortly.
- added this to the milestone
on Oct 29, 2020
Description
Same issue as described at #220. I commented there as well, but the issue has been closed.
I'm having the exact same issue on the latest version 2.0.0. Only seems to happen for personal accounts trying to use LargeFileUploadTask for upload to onedrive. LargeFileUploadTask works fine when used with a business account uploading both to a sharepoint document library or onedrive.
Other requests like GET /drives//items/children work perfectly.
Console Errors:
Access to fetch at 'https://api.onedrive.com/rup/24b5d554d8c0d12a/' from origin 'http://localhost:8081' has been blocked by CORS policy: Request header field sdkversion is not allowed by Access-Control-Allow-Headers in preflight response.
Steps to Reproduce
Using LargeFileUploadTask as described here
Expected behavior: Start file upload
Actual behavior: Fails with a Failed to fetch error message
Usage Information
SDK Version - 2.0.0
Browser (Check, if using Browser version of SDK)
Browser Name - Chrome
Version - 79.0.3945.130 (64bit)
AB#6002