Episerver 11特定域名CORS配置高效方案咨询

问题背景 #

我们正在开发一个使用Fetch API从Episerver获取文档的React应用，目前遇到CORS错误。尝试了多种Web.config配置方法均未解决，当前临时通过Azure门户在Web应用层面启用CORS，现咨询是否存在更高效的Episerver 11特定域名CORS配置方式（Episerver 12有相关内置设置，但我们需针对Episerver 11）。

已尝试的配置方法 #

1. Web.config中配置CORS模块 #

在Web.config的<system.webServer>下添加CORS规则，但未达预期效果：

<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. 自定义头部与出站重写规则 #

安装并配置CORS模块后导致应用无法正常运行，配置如下：

<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. 另一种重写规则配置 #

此方法返回的响应头仅包含Headers和Methods，缺少Origin字段，导致CORS验证失败：

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

推荐的Episerver 11 CORS配置方案 #

针对Episerver 11，推荐通过自定义模块拦截请求并添加CORS头的方式，这比单纯依赖Web.config更灵活且适配Episerver的请求处理流程：

步骤1：创建CORS拦截模块 #

在项目中添加一个实现IHttpModule的类，用于处理CORS请求：

using System;
using System.Web;

public class CorsHttpModule : IHttpModule
{
    public void Init(HttpApplication context)
    {
        context.BeginRequest += OnBeginRequest;
    }

    private void OnBeginRequest(object sender, EventArgs e)
    {
        var app = sender as HttpApplication;
        var request = app.Context.Request;
        var response = app.Context.Response;

        // 允许的源列表，可从配置文件读取
        var allowedOrigins = new[] {
            "https://site-dev.domain1.com",
            "https://site-qa.domain1.com",
            "https://site-uat.domain1.com",
            "https://site-sandbox.domain2.com",
            "https://site.domain2.com",
            "http://localhost:3000"
        };

        var origin = request.Headers["Origin"];
        if (!string.IsNullOrEmpty(origin) && Array.Exists(allowedOrigins, o => o.Equals(origin, StringComparison.OrdinalIgnoreCase)))
        {
            response.AddHeader("Access-Control-Allow-Origin", origin);
            response.AddHeader("Access-Control-Allow-Credentials", "true");
        }

        // 处理OPTIONS预检请求
        if (request.HttpMethod == "OPTIONS")
        {
            response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
            response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
            response.AddHeader("Access-Control-Max-Age", "120");
            response.StatusCode = 200;
            response.End();
        }
    }

    public void Dispose() {}
}

步骤2：注册模块到Web.config #

在Web.config的<system.webServer>下添加模块注册：

<system.webServer>
  <modules>
    <add name="CorsHttpModule" type="YourNamespace.CorsHttpModule" />
  </modules>
</system.webServer>

注意事项 #

• 移除Web.config中之前配置的冲突CORS规则（如<cors>节点、自定义头部和重写规则）
• 测试时使用浏览器开发者工具检查响应头是否包含正确的Access-Control-Allow-Origin值
• 可将允许的源列表移至配置文件，便于不同环境快速切换

内容的提问来源于stack exchange，提问作者Farhin Shaikh