Unsafe attempt to load URL (SVG)

[eyaleizenberg]

Hi,
When I'm trying to use the DropdownButton in the SF env, I am getting the following error:

Unsafe attempt to load URL https://MYDOMAIN-dev-ed.my.salesforce.com/assets/icons/utility-sprite/svg/symbols.svg#down from frame with URL https://MYDOMAIN-dev-ed.lightning.force.com/c/main.app. Domains, protocols and ports must match.

Obviously this is a CORS issue. The question is how I fix it in this case?

Thanks.

[rjmah]

Since my asset folder is a static resource zip, I'm using utils.setAssetRoot() to set the correct asset path. I have to set the assetRoot as a global variable in VF so that I can use it in my webpack bundle.

In my VF page:

<script type="text/javascript">
    window.assetRoot = "{!URLFOR($Resource.SLDS)}";
</script>

And in my webpack entry file:

import { util } from 'react-lightning-design-system';
util.setAssetRoot(window.assetRoot);

[stomita]

Yes, util.setAssetRoot() is the way to tell the resource location.

[eyaleizenberg]

Works! Thanks!

[eyaleizenberg]

By the way I am faced with a very similar issue when trying to run my app in the SF environment. The issue is now in the CSS when it's looking for the fonts. Suggestions? @stomita @rjmah

[eyaleizenberg]

I was able to work around the issue by changing the paths to /resource/assets....

However I have noticed that some of the styles are being overridden, specifically the font. Until I remove some other .css includes from the head, my font doesn't catch on...

[rjmah]

@eyaleizenberg

Not sure what your setup is but here is what I'm doing with the lightning design system zip file as a static resource:

<apex:page standardStylesheets="false" applyBodyTag="false" sidebar="false">
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
<div class="slds">
...

• Make sure your static resource contains the SalesforceSans font in resource/assets/fonts.
• I need to apply the "slds" class to my div because I am still showing my aloha header. Otherwise, I'll get a CSS clash for my header.
• ...-vf.css is the version of css that scopes the lightning css to whatever is in the "slds" classed element.

[eyaleizenberg]

Yup looks like I was missing the -vf.css

Thanks a lot @rjmah !

[rjmah]

Glad it worked!