如何在WCF服务库中启用CORS解决Next.js跨域请求问题

问题核心 #

你的Next.js应用触发了浏览器CORS预飞检查（因GET请求携带了Content-Type: application/json自定义头），但WCF服务未返回Access-Control-Allow-Origin等必要响应头，也未处理OPTIONS预飞请求，导致跨域被拦截。

解决方案（针对无asax.cs的WCF服务库） #

方案1：自定义CORS行为扩展（推荐，全局生效）

通过WCF行为扩展全局添加CORS响应头，并自动处理OPTIONS预飞请求。

步骤1：添加CORS相关类

在WCF服务库项目中新增以下3个类：

// CORS消息检查器：负责添加响应头、处理OPTIONS请求
public class CorsMessageInspector : IDispatchMessageInspector
{
    private readonly string _allowedOrigin;

    public CorsMessageInspector(string allowedOrigin)
    {
        _allowedOrigin = allowedOrigin;
    }

    public object AfterReceiveRequest(ref Message request, IClientChannel channel, InstanceContext instanceContext)
    {
        // 拦截OPTIONS预飞请求
        if (request.Properties.ContainsKey("HttpOperationName"))
        {
            var httpOpName = request.Properties["HttpOperationName"] as string;
            if (httpOpName.Equals("OPTIONS", StringComparison.OrdinalIgnoreCase))
            {
                var responseMessage = Message.CreateMessage(MessageVersion.None, "");
                return responseMessage;
            }
        }
        return null;
    }

    public void BeforeSendReply(ref Message reply, object correlationState)
    {
        // 处理OPTIONS请求的响应头
        if (correlationState is Message optionsResponse)
        {
            reply = optionsResponse;
            var httpResponse = reply.Properties["HttpResponse"] as HttpResponseMessageProperty;
            if (httpResponse != null)
            {
                httpResponse.Headers.Add("Access-Control-Allow-Origin", _allowedOrigin);
                httpResponse.Headers.Add("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
                httpResponse.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
            }
            return;
        }

        // 给正常请求添加CORS头
        if (reply.Properties.ContainsKey("HttpResponse"))
        {
            var httpResponse = reply.Properties["HttpResponse"] as HttpResponseMessageProperty;
            httpResponse?.Headers.Add("Access-Control-Allow-Origin", _allowedOrigin);
        }
    }
}

// CORS行为扩展元素：用于配置文件注册
public class CorsBehaviorExtension : BehaviorExtensionElement
{
    [ConfigurationProperty("allowedOrigin", IsRequired = true)]
    public string AllowedOrigin
    {
        get => (string)base["allowedOrigin"];
        set => base["allowedOrigin"] = value;
    }

    public override Type BehaviorType => typeof(CorsEndpointBehavior);

    protected override object CreateBehavior()
    {
        return new CorsEndpointBehavior(AllowedOrigin);
    }
}

// CORS端点行为：绑定消息检查器
public class CorsEndpointBehavior : IEndpointBehavior
{
    private readonly string _allowedOrigin;

    public CorsEndpointBehavior(string allowedOrigin)
    {
        _allowedOrigin = allowedOrigin;
    }

    public void AddBindingParameters(ServiceEndpoint endpoint, BindingParameterCollection bindingParameters) { }
    public void ApplyClientBehavior(ServiceEndpoint endpoint, ClientRuntime clientRuntime) { }
    public void Validate(ServiceEndpoint endpoint) { }

    public void ApplyDispatchBehavior(ServiceEndpoint endpoint, EndpointDispatcher endpointDispatcher)
    {
        endpointDispatcher.DispatchRuntime.MessageInspectors.Add(new CorsMessageInspector(_allowedOrigin));
    }
}

步骤2：修改App.config配置

注册自定义行为并绑定到服务端点：

<system.serviceModel>
  <!-- 注册CORS行为扩展 -->
  <extensions>
    <behaviorExtensions>
      <add name="corsBehavior" type="你的命名空间.CorsBehaviorExtension, 你的程序集名称"/>
    </behaviorExtensions>
  </extensions>

  <!-- 更新端点行为 -->
  <behaviors>
    <endpointBehaviors>
      <behavior name="jsonBehavior">
        <enableWebScript />
        <!-- 添加CORS配置，allowedOrigin填你的Next.js地址，生产环境不要用* -->
        <corsBehavior allowedOrigin="http://localhost:3000"/>
      </behavior>
    </endpointBehaviors>
  </behaviors>

  <!-- 配置WebHttpBinding -->
  <bindings>
    <webHttpBinding>
      <binding name="webHttpBindingWithCors" automaticFormatSelectionEnabled="true"/>
    </webHttpBinding>
  </bindings>

  <!-- 绑定服务与配置 -->
  <services>
    <service name="你的命名空间.Service1">
      <endpoint address="" binding="webHttpBinding" bindingConfiguration="webHttpBindingWithCors" contract="你的命名空间.IService1" behaviorConfiguration="jsonBehavior"/>
    </service>
  </services>
</system.serviceModel>

方案2：手动处理OPTIONS请求（快速临时方案）

无需自定义行为，直接在契约中添加OPTIONS操作：

1. 修改IService1接口：

public interface IService1
{
    [OperationContract]
    [WebGet(ResponseFormat = WebMessageFormat.Json)]
    string leerHuella();

    // 添加OPTIONS操作契约
    [OperationContract]
    [WebInvoke(Method = "OPTIONS", UriTemplate = "*")]
    void HandleOptions();
}

2. 在Service1中实现：

public void HandleOptions()
{
    var response = WebOperationContext.Current.OutgoingResponse;
    response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:3000");
    response.Headers.Add("Access-Control-Allow-Methods", "GET, OPTIONS");
    response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
}

额外注意事项 #

• 生产环境禁止使用allowedOrigin="*"，需指定具体前端域名
• 你的GET请求可移除Content-Type: application/json（GET无请求体），避免触发预飞检查，简化配置

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