Hi,

I am currently working on a React application that uses the Fetch API to retrieve documents stored in Episerver. However, we are encountering CORS errors. We have tried several methods using the Web.config file, but they haven't resolved the issue. Below are the approaches we’ve attempted:

1- Modifying Custom Headers and Rewrite Rules for Outbound Traffic in Web.config:
We modified the Web.config file to add CORS headers, but this approach did not work as expected. The XML changes are provided below. Unfortunately, this method did not resolve the issue.

    <system.webServer>
  <cors enabled="true" failUnlistedOrigins="true">
    <!-- Block all wildcard origins -->
    <add origin="*" allowed="false" />
    <!-- Specific allowed origins with credentials -->
    <add origin="https://site-dev.domain1.com" allowCredentials="true" maxAge="120" />
    <add origin="https://site-qa.domain1.com" allowCredentials="true" maxAge="120" />
    <add origin="https://site-uat.domain1.com" allowCredentials="true" maxAge="120" />
    <add origin="https://site-sandbox.domain2.com" allowCredentials="true" maxAge="120" />
    <add origin="https://site.domain2.com" allowCredentials="true" maxAge="120" />
    <!-- Allow localhost for local development -->
    <add origin="http://localhost:3000" allowed="true" />
    <!-- Block HTTP origins -->
    <add origin="http://*" allowed="false" />
  </cors>
</system.webServer>

2- Using the CORS Module in Web.config:
I installed the CORS module and configured it based on the cors-module-configuration-reference

The configuration is provided below. However, this approach caused issues, and the application stopped functioning as expected.

 <httpProtocol>
  <customHeaders>
    <remove name="X-Powered-By" />
    <add name="X-XSS-Protection" value="1; mode=block" />
    <add name="X-Content-Type-Options" value="nosniff" />
    <add name="X-Frame-Options" value="SAMEORIGIN" />
    <add name="Strict-Transport-Security" value="max-age=31536000; includeSubDomains" />
    <add name="Content-Security-Policy" value="frame-ancestors 'self'; object-src 'none'; upgrade-insecure-requests;" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization" />
    <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS, PUT, DELETE" />
    <add name="Access-Control-Allow-Origin" value="{HTTP_ORIGIN}" /> 
  </customHeaders>
</httpProtocol>

<rewrite>
  <outboundRules>
    <rule name="setcorsheader">
      <match servervariable="response_access_control_allow_origin" pattern=".*" />
      <conditions logicalgrouping="matchall" trackallcaptures="true">
               <add input="{http_origin}" pattern="^(https:\/\/(site-(dev|qa|uat)\.domain1\.com|site-sandbox\.domain2\.com|site\.domain2\.com))$|^(http:\/\/localhost:3000)$" />

      </conditions>
      <action type="rewrite" value="{c:0}" />
    </rule>
  </outboundRules>
</rewrite>

3- Additional Rewrite Rule in Web.config:
I attempted another rewrite rule in the Web.config file, but it didn’t resolve the CORS issue. Below is the configuration I used.

<rewrite>
            <outboundRules>
                <rule name="Add CORS Allowed Origins">
                    <match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern=".*" />
                    <conditions>
                           <add input="{http_origin}" pattern="^(https:\/\/(site-(dev|qa|uat)\.domain1\.com|site-sandbox\.domain2\.com|site\.domain2\.com))$|^(http:\/\/localhost:3000)$" />
                    </conditions>
                    <action type="Rewrite" value="{HTTP_ORIGIN}" />
                </rule>

                <rule name="Add CORS Allowed Methods">
                    <match serverVariable="RESPONSE_Access-Control-Allow-Methods" pattern=".*" />
                    <action type="Rewrite" value="GET, POST, PUT, DELETE, OPTIONS" />
                </rule>

                <rule name="Add CORS Allowed Headers">
                    <match serverVariable="RESPONSE_Access-Control-Allow-Headers" pattern=".*" />
                    <action type="Rewrite" value="Content-Type, Authorization" />
                </rule>
            <rules>
             
            </rules>
        </rewrite>

This approach only includes Header &Methods. Origin is missing in the response header which is why CORS fails.

4- Current Workaround:

As a temporary solution, I have enabled CORS at the WebApp level via the Azure Portal. Please refer to the attached screenshot for more details.

However, the issue with this workaround is that, since I only have access to the lower environments, I can make this change there. But for the business testing and production environments, which are managed by Optimizely, they will not implement this change. Here is the response I received from Optimizely regarding enabling CORS and adding the necessary domains to the production and business test environments:

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."

I would like to know if there is a more efficient way to configure CORS in Episerver 11 for specific domains only. While I am aware that Episerver 12 provides built-in settings for configuring CORS, I am specifically looking for a solution for Episerver 11.

Regards.