microsoft-graph-toolkit icon indicating copy to clipboard operation
microsoft-graph-toolkit copied to clipboard

[BUG] LargeFileUploadTask cors error

Open topce opened this issue 3 years ago • 3 comments

Describe the bug "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."

To Reproduce Steps to reproduce the behavior: 1.Login to personal account using msal2 provider and mgt-login 2. try to upload file const uploadTask = await OneDriveLargeFileUploadTask.create( graphClient, file, options ); 3.got error 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.

Expected behavior file should be uploaded to one drive

Environment (please complete the following information):

  • OS: Windows 10
  • Browser Chrome -all browsers probably
  • Framework Angular
  • Context OneDrive
  • Version latest "@microsoft/mgt": "2.4.0",
  • Provider Msal2Provider

Additional context It does not work only with personal account probably connected with https://github.com/microsoftgraph/msgraph-sdk-javascript/issues/265

topce avatar Mar 23 '22 08:03 topce

Hello topce, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

ghost avatar Mar 23 '22 08:03 ghost

Just to confirm, the Graph client you are getting is the one provided by MGT, right? I'm afraid this feature is not available yet in MGT (to prevent breaking changes).

You might need to rollout your own Graph client (https://www.npmjs.com/package/@microsoft/microsoft-graph-client) that is at the latest version, and you should be able to stop the CORS errors on the LargeFileUploadTask.

Let me know if this helps!

sebastienlevert avatar Mar 30 '22 19:03 sebastienlevert

Hi @sebastienlevert Yes indeed I use Graph client from MGT. Not sure if it works even with latest version of MGC (did not check) Currently I patched mgt-element mgt-proxy-provider microsoft-graph-client in order to make it work.

Normally PR https://github.com/microsoftgraph/msgraph-sdk-javascript/pull/351 that suppose to fix issue https://github.com/microsoftgraph/msgraph-sdk-javascript/issues/265 is merged into microsoft-graph-client 2.2.1 so in theory it should work, but not in practice ;-)

When MGT use latest version of MGC I will check if it works and remove my patch

Thank you for your help !

topce avatar Apr 01 '22 04:04 topce

Adding @nikithauc to have a look from a Graph SDK lens.

sebastienlevert avatar Oct 19 '22 05:10 sebastienlevert

Looks like MGT 2.6 takes on a dependency of the Graph JS library 2.2.1

Can you upgrade and verify if the issue persists @topce?

nikithauc avatar Oct 26 '22 20:10 nikithauc

@nikithauc still same error : has been blocked by CORS policy: Request header field sdkversion is not allowed by Access-Control-Allow-Headers in preflight response. You can reproduce it yourself if you try to update to one drive : 1.Login to personal account using msal2 provider and mgt-login 2. try to upload file const uploadTask = await OneDriveLargeFileUploadTask.create( graphClient, file, options );

stack trace : ERROR Error: Uncaught (in promise): Error: Failed to fetch TypeError: Failed to fetch at :8080/ui/polyfills.js:1826:30 at proto. (:8080/ui/polyfills.js:1170:16) at HTTPMessageHandler. (HTTPMessageHandler.js:24:42) at Generator.next () at tslib.es6.js:74:1 at new ZoneAwarePromise (:8080/ui/polyfills.js:1715:21) at Module.__awaiter (tslib.es6.js:70:1) at HTTPMessageHandler.execute (HTTPMessageHandler.js:22:16) at SdkVersionMiddleware. (SdkVersionMiddleware.js:57:47) at Generator.next () at SdkVersionMiddleware.js:13:71 at new ZoneAwarePromise (:8080/ui/polyfills.js:1715:21) at __awaiter (SdkVersionMiddleware.js:9:12) at SdkVersionMiddleware.execute (SdkVersionMiddleware.js:32:16) at TelemetryHandler. (TelemetryHandler.js:57:50) at resolvePromise (:8080/ui/polyfills.js:1455:19) [angular] at :8080/ui/polyfills.js:1350:9 [angular] at :8080/ui/polyfills.js:1367:25 [angular] at asyncGeneratorStep (:8080/ui/vendor.js:155170:5) [angular] at _throw (:8080/ui/vendor.js:155193:9) [angular] at Object.onInvoke (:8080/ui/vendor.js:88196:25) [angular] at :8080/ui/polyfills.js:1528:28 [angular] at Object.onInvokeTask (:8080/ui/vendor.js:88184:25) [angular] handleError @ :8080/ui/vendor.js:66595 office:1

topce avatar Oct 28 '22 06:10 topce