Hi,

I am currently working on a React application that uses the Fetch API to retrieve documents from Episerver. However, we’re encountering CORS errors. I faced a similar issue with CMS 11, where I attempted several approaches to handle the issue, which I’ve detailed in another post

In CMS 12, CORS is built-in, but we are still experiencing CORS errors. It works in CMS 12 but the behavior is inconsistent compared to CMS 11, where the issue was constant.

My CMS 12 code snippet for CORS configuration is as follows:

 public void ConfigureServices(IServiceCollection services)
 {
     services.AddCors(options =>
     {
         options.AddPolicy("AllowSpecificOrigin", builder =>
         {
             builder.WithOrigins(_configuration["AllowedOrigins"]?.Split(",") ?? Array.Empty<string>())
                 .AllowAnyHeader().AllowAnyMethod();
         });
     });
 }

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 {
     app.UseCors("AllowSpecificOrigin");
 }

The _configuration["AllowedOrigins"] includes the sites calling Optimizely, defined in the appsettings from Passportal:

"AllowedOrigins": https://xyz-dev.xxx.com, https://uat.xxx.com

Note: I have also tried wild card character to see if that works but the issue is still inconsistent wherein the documents fetching works at 1 time & stops the next instance.

When I temporarily enable CORS at the WebApp level via the Azure Portal, the application works both in CMS 11 & 12. But when I attempt to implement CORS via code changes, the issue persists. It seems something might be cutting off the headers at the Cloudflare level or another point, but I can’t pinpoint it.

The challenge with this workaround is that I only have access to the lower environments, and while I can make the change there, Optimizely manages the production and business testing environments. They are not willing to implement this change, which brings me to their response:

Optimizely’s Response: "CORS is not a feature that can be configured on the DXP platform. This was a decision made by the product team, and the configurations must be done within the code base."

So reaching out to Optimizely support has not been helpful, as we're just going in circles without a resolution. We implemented an alternate solution in CMS 11, but we'd like to see CORS functionality work smoothly in CMS 12, given that it’s built-in.

Has anyone here encountered similar issues or have suggestions on how to resolve this in CMS12?

Any help would be greatly appreciated, as Optimizely support hasn’t been effective so far.

My client side script code :

<script type="text/javascript">
   async function downloadDocumentsfrom12() {
  const files = [
    { url: 'https://inte12.sitea.xxx.com/siteassets/Solution-Analytics/path/solution-documents/sample_explain.pdf', name: 'sample Explain' },
    { url: 'https://inte12.sitea.xxx.com/siteassets/Solution-Analytics/path/solution-documents/dummy.pdf', name: 'dummy' }
  ];
  try {
    const fetchPromises = files.map((file) =>
      fetch(file.url)
        .then(response => {
          if (!response.ok) {
            throw new Error(`Failed to fetch ${file.name} from ${file.url}`);
          }
          return response.blob();
        })
        .then(blob => {
          const url = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = `${file.name}.pdf`; 
          link.click();
          console.log(`${file.name} downloaded successfully`);
        })
        .catch(error => console.error(`Error downloading ${file.name}:`, error))
    );

    // Wait for all fetch promises to complete
    await Promise.all(fetchPromises);
  } catch (error) {
    console.error('Error in fetching one or more documents:', error);
  }
}

Regards,

Farhin