CORS policy error when using download function with NextJS

[phoenixthefirebird]

Describe the bug Access to XMLHttpRequest at 'https://files.rcsb.org/view/2EJ0.mmtf' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To Reproduce Steps to reproduce the behavior:

1. invoke download function on $3dmol package
2. go to inspect in Chrome and you'll see the error message

Expected behavior download function is supposed to fetch the pdb file from rcsb and display the pdf molecule

Additional context I believe adding headers: { "accept": "application/json", "Access-Control-Allow-Origin":"*" },

to $3Dmol.getbin function's ajax request will solve the issue. I appreciate a quick release of the patch as my capstone project depends on it

[dkoes]

This is a response header. The client cannot override the security settings of the server. The RCSB does not have this header set and there's nothing you can do to change that. I am confused though because you are trying to access an mmtf from "https://files.rcsb.org/view/" and the base URL should be "https://mmtf.rcsb.org/v1.0/full/". Can you provide an example of how you are using download? Here is an example of correct usage: https://3dmol.org/tests/auto/generate_test.cgi?test=_3dmol_js_download

[phoenixthefirebird]

here it is I've followed the format over on the documentation not sure why it's going to "https://files.rcsb.org/view/", please let me know!

$3Dmol is the 3dmol npm package

[phoenixthefirebird]

it's weird, I tried using the example code you gave me and the same error occurred Access to XMLHttpRequest at 'https://files.rcsb.org/view/2NBD.mmtf' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[phoenixthefirebird]

I'm also getting falling back to pdb format in the console

Note I'm using v1.7.0 if that makes any difference

[dkoes]

can you reproduce the problem with v1.8.0?

[phoenixthefirebird]

I get this error when I use v.1.8.0's download and I thought to avoid it with 1.7.0 It would be great if you know what's happening here

[dkoes]

Can you switch to the non-minified version and provide more of the stack trace? Are you sure the issue is in the download and not the addModel call which possibly isn't providing the data in the right format?

[phoenixthefirebird]

I'm sure it's not the addModel since if I comment out the download call the error does not appear Here is the stack trace Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. at $3Dmol.base64ToArray (webpack-internal:///./node_modules/3dmol/build/3Dmol-nojquery.js:11424:33) at $3Dmol.Parsers.parsers.mmtf.parsers.MMTF (webpack-internal:///./node_modules/3dmol/build/3Dmol-nojquery.js:35947:30) at $3Dmol.GLModel.GLModel.parseMolData (webpack-internal:///./node_modules/3dmol/build/3Dmol-nojquery.js:26447:27) at GLModel.addMolData (webpack-internal:///./node_modules/3dmol/build/3Dmol-nojquery.js:25187:46) at handler (webpack-internal:///./node_modules/3dmol/build/3Dmol-nojquery.js:11526:15) at Object.eval [as success] (webpack-internal:///./node_modules/3dmol/build/3Dmol-nojquery.js:11542:25) at fire (webpack-internal:///./node_modules/jquery/dist/jquery.js:3500:31) at Object.fireWith [as resolveWith] (webpack-internal:///./node_modules/jquery/dist/jquery.js:3630:7) at done (webpack-internal:///./node_modules/jquery/dist/jquery.js:9822:14) at XMLHttpRequest.eval (webpack-internal:///./node_modules/jquery/dist/jquery.js:10083:9) $3Dmol.base64ToArray @ 3Dmol-nojquery.js?e97d:11429 $3Dmol.Parsers.parsers.mmtf.parsers.MMTF @ 3Dmol-nojquery.js?e97d:35951 $3Dmol.GLModel.GLModel.parseMolData @ 3Dmol-nojquery.js?e97d:26451 GLModel.addMolData @ 3Dmol-nojquery.js?e97d:25191 handler @ 3Dmol-nojquery.js?e97d:11531 eval @ 3Dmol-nojquery.js?e97d:11547 fire @ jquery.js?8262:3500 fireWith @ jquery.js?8262:3630 done @ jquery.js?8262:9822 eval @ jquery.js?8262:10083 load (async) send @ jquery.js?8262:10102 ajax @ jquery.js?8262:9716 jQuery.<computed> @ jquery.js?8262:9872 eval @ 3Dmol-nojquery.js?e97d:11546 Promise.catch (async) eval @ 3Dmol-nojquery.js?e97d:11541 $3Dmol.download @ 3Dmol-nojquery.js?e97d:11535 eval @ ProteinViewer.tsx?f278:55 commitHookEffectListMount @ react-dom.development.js?ac89:23150 commitPassiveMountOnFiber @ react-dom.development.js?ac89:24926 commitPassiveMountEffects_complete @ react-dom.development.js?ac89:24891 commitPassiveMountEffects_begin @ react-dom.development.js?ac89:24878 commitPassiveMountEffects @ react-dom.development.js?ac89:24866 flushPassiveEffectsImpl @ react-dom.development.js?ac89:27039 flushPassiveEffects @ react-dom.development.js?ac89:26984 performSyncWorkOnRoot @ react-dom.development.js?ac89:26076 flushSyncCallbacks @ react-dom.development.js?ac89:12042 commitRootImpl @ react-dom.development.js?ac89:26959 commitRoot @ react-dom.development.js?ac89:26682 finishConcurrentRender @ react-dom.development.js?ac89:25981 performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25809 workLoop @ scheduler.development.js?bcd2:266 flushWork @ scheduler.development.js?bcd2:239 performWorkUntilDeadline @ scheduler.development.js?bcd2:533

[dkoes]

We add the ajax binary transport (https://www.npmjs.com/package/jquery-binarytransport) in order to download binary data like mmtf files. I wonder if your using your own version of jquery is causing the problem. Make sure jquery is loaded before 3dmol and check to see that the transport is defined after 3dmol.js is loaded.

[phoenixthefirebird]

I believe jquery is loaded before 3dmol, here is the start of my code my jquery version is 3.6.0 how do I check that the transport is defined?

[dkoes]

Have you tried using the the regular 3dmol instead of 3dmol-nojquery?

[phoenixthefirebird]

same error Unhandled Runtime Error InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. Call Stack $3Dmol.base64ToArray node_modules\3dmol\build\3Dmol.js (22311:0) $3Dmol.Parsers.parsers.mmtf.parsers.MMTF node_modules\3dmol\build\3Dmol.js (46833:0) $3Dmol.GLModel.GLModel.parseMolData node_modules\3dmol\build\3Dmol.js (37333:0) GLModel.addMolData node_modules\3dmol\build\3Dmol.js (36073:0) handler node_modules\3dmol\build\3Dmol.js (22413:0) Object.eval [as success] node_modules\3dmol\build\3Dmol.js (22429:0) fire node_modules\jquery\dist\jquery.js (3500:0) Object.fireWith [as resolveWith] node_modules\jquery\dist\jquery.js (3630:0) done node_modules\jquery\dist\jquery.js (9822:0) XMLHttpRequest.eval node_modules\jquery\dist\jquery.js (10083:0)

and still getting "falling back to pdb format" in the console

[phoenixthefirebird]

looks like https://github.com/3dmol/3Dmol.js/issues/583 is related and I'm not sure how the person using Vue.js resolved it

[dkoes]

Can you provide a self-contained reduced test case I can reproduce the problem?

[phoenixthefirebird]

I really appreciate it! I've created a watered-down version of my code and invited you as collaborator on github. Here is the URL to the repo https://github.com/phoenixthefirebird/next_3dmol Please let me know what else you need

[dkoes]

Okay, I think I see the issue. MMTF isn't defined - it hasn't been set in window namespace. This is an external js library that 3dmol normally bundles, but since you are loading it as a module it is missing. You can try loading it and setting window.MMTF as a workaround. I need to improve how this is bundled and referenced. There's a second bug, which is in the fallback code for dealing with a failure with MMTF, which fails to set the type to PDB instead of MMTF after downloading the PDB.

[phoenixthefirebird]

it does work now with MMTF! It is a little clunky to have to download the whole MMTF js repo haha. Thanks so much for your help I really appreciate it!