Resolving Cross-Origin Resource Sharing (CORS) Issues

If your remote template is hosting assets, but you do not have CORS enabled, you may find your Career Portal, talent showcase, or Haleymail landing page has a CORS error.

CORS stands for Cross-Origin Resource Sharing. By enabling CORS, assets can be shared across multiple domains.

If your Career Portal, talent showcase, or Haleymail landing page is having display issues, particularly with icons appearing as squares or not at all, it is probably a CORS issue.

To Diagnose:

1. Open the Career Portal in Chrome.
2. Open Developer Tools (View > Developer > Developer Tools).
3. Click the “Console” tab.
4. You will see an error (or errors) that look like similar to this:

In Firebug, the error message looks similar to this:

To resolve:

1. Access your .htaccess file. This is a hidden file that resides within the root folder of the site.
2. Set Access-Control-Allow-Origin “*” on font files. This is done by adding the following code to the bottom of the .htaccess file:

<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$"> 
	<IfModule mod_headers.c> 
                Header set Access-Control-Allow-Origin "*" 
	</IfModule> 
</FilesMatch>

This code states that if a file matches one of those extensions, then enable cross-origin resource sharing. This will allow the Career Portal to access the font file from the subdomain.

Download this snippet as a .txt file.

To Confirm:

After adding the code, check the status by using developer tools:

1. Open the remote template in Chrome.
2. Open Developer Tools (View > Developer > Developer Tools).
3. Click the “Network” tab.
4. Reload the page.
5. Click on “Font” to filter assets by fonts.
6. Select a font and check the “Headers” tab. The following should be present:

If "access-control-allow-origin:*" is missing from Headers, CORS is not enabled and the resource cannot be shared.

Need Additional Help?

If at any point you think you need some help, you can search our knowledgebase by keyword or browse all our articles. Or just go ahead and click on the "Submit a Ticket" button at http://helpme.haleymarketing.com or email us at support@haleymarketing.com - we're here to help!