Access to XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

[vipinviswa]

The spot editor published assets are hosted on AWS cloudfront.
The html file to load the player is dynamically generated based. The player loading script is as shows below
<script language="javascript" type="text/javascript">

jQuery(document).ready(function(){

jQuery('#wr360PlayerId').rotator({
licenseFileURL: 'license.lic',
configFileURL: '<aws cloudfront distribution url>/360_assets/TestProject/TestProject.xml',
graphicsPath: '<aws cloudfront distribution url>/imagerotator/html/img/basic',
alt: '360 degree view - NewProject1',
googleEventTracking: false,
});
});

A blank page is displayed and the following error reported
Access to XMLHttpRequest at "<aws cloudfront distribution url>/360_assets/TestProject/TestProject.xml" from origin "http://localhost:59290" has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

[ForumAdmin]

Hi, please see this article. CORS is a server-side configuration and there're steps to configure it on CloudFront + S3:

Resolve the "No 'Access-Control-Allow-Origin' header" error from CloudFront

I'm getting the CORS error "No 'Access-Control-Allow-Origin'" on my requested resource in Amazon CloudFront. Why am I getting this and how can I resolve it?

repost.aws