LargeFileUploadTask cors error

[malinkody]

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

[malinkody]

Digging through the source I found that the issue was caused by headers appended by the TelemetryHandler.ts which is a middleware attached right before the request is sent. These headers were only causing issues with chunk uploads that were being sent with the PUT method to https://api.onedrive.com/rup/<...>/<...>.

My current workaround was to initialize the middleware chain myself as follows. This way bypassing the TelemetryHandler middleware. 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 the HTTPClientFactory. 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
});

[MIchaelMainer]

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.

[bcarthic]

So 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?

[bcarthic]

@muthurathinam Do you have any update on this? I am kind of blocked on this issue

[dluc]

the same issue occurs with other headers like client-request-id, when talking to api.onedrive.com, i.e. all the headers added by TelemetryHandler

[topce]

Thank you @malinkody !
Workaround works for me as well

public 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.

[hasridha]

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..

[nikithauc]

I will take a look at this shortly.