CORS errors when loading resources from config.json

[vladyslav571]

Category

• Question
• Typo
• Additional article idea

Question

I have a webpart which uses external library according to (https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library#load-a-script-from-a-cdn). Everything works fine however I always see CORS errors when SP page tries to load this library. Also same errors are seen when SP page tries to load localizedResources from config.json.

Errors are like:
"Access to script at 'https:///development/sharepoint/v1/assets/v1-commonstrings_en-us_cc83c7b1d8f44bf102f81e223fdf4b06.js' from origin 'https://*.sharepoint.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I also investigated that localizedResources and external libs are loaded twice by script "https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-gb_187009d50ea1060e33206e49000cbf6e.js":

1. first time (when it fails due to CORS) with header Sec-Fetch-Mode: cors
2. second time (then successful) Sec-Fetch-Mode: no-cors

Environment details (development & target environment)

• Your Developer Environment: [Chrome, Edge browser]
• Target Environment: [SharePoint Online]
• Framework: [spfx 1.10]
• Browser(s): [Chrome, Edge]
• Tooling: [e.g. VS Code | SPFx v1.10.0]

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[andrewconnell]

A CORS issue is going to result from the resource you're requesting, not from SharePoint. Not sure if "https:///development/sharepoint" is a real endpoint or something you used as an example. Can you clarify where that is?

That server must respond with the HTTP header value Access-Control-Allow-Origin that includes the requesting domain.

[vladyslav571]

I am using some standard CDN resources, like https://appsforoffice.microsoft.com/embedded/1.0/visio-web-embedded.js

I dont control them, so I cant change HTTP headers. However it seems strange to me that requesting JS file (which is configured via config.json, "externals" section) would need CORS support on a server.

Maybe you can help me to understand the internal mechanics? I thought that these URS from config.json are added to the page via <script> tags. However it seems like SPFX is instead loading them via XHR. Am I right ?

[andrewconnell]

@VladyslavGoloshchapov said:

Maybe you can help me to understand the internal mechanics? I thought that these URS from config.json are added to the page via <script> tags. However it seems like SPFX is instead loading them via XHR. Am I right ?

Yes... mostly. SPFx loads scripts using a module loader. What's listed in config.js is added to the list of dependencies for the SPFx component... look at the JSON manifest generated when you run gulp bundle... you'll see your dependencies listed in there. That's used by the SPFx runtime to tell the module loader (used to be system.js, but they started moving to require.js in SPO... not sure if that work is complete, but it's irrelevant since that's transparent to 3rd party like us).

So yes, external scripts are loaded on demand when SPFx initializes on the page and starts loading things it needs. These scripts are not added via <script> tags.

So... if the script you are loading is on a server that has CORS enabled, you need to configure THAT server (not SPO/your component) to allow your requesting domain to load the script. However, if you don't control that server (which you don't if it's the Visio embedded script you reference in your post), there's nothing you can do. You'll have to find a different way to implement what you want to implement.

[vladyslav571]

ok, thanks. that answers my question.
Only thing I don`t understand is why it first tries to load with header Sec-Fetch-Mode: cors and then when it fails - without it.

but probably it is not a question to you, but to system.js