.NET 4.8 WCF服务与Angular14跨域CORS常规方案无效求助

1. 给WCF服务配置官方CORS行为扩展 #

这是WCF原生支持的跨域处理方式，比自定义HTTP头更精准，步骤如下：

• 先通过NuGet安装Microsoft.ServiceModel.Web.HttpCors包（确保版本适配.NET 4.8）
• 在web.config的<system.serviceModel>节点下添加行为扩展定义：

<extensions>
  <behaviorExtensions>
    <add name="crossOriginResourceSharingBehavior"
         type="Microsoft.ServiceModel.Web.HttpCors.CorsBehaviorExtensionElement, Microsoft.ServiceModel.Web.HttpCors"/>
  </behaviorExtensions>
</extensions>

• 定义CORS行为规则，允许你的Angular站点域名：

<behaviors>
  <endpointBehaviors>
    <behavior name="CorsEnabledBehavior">
      <crossOriginResourceSharingBehavior>
        <allowOrigins>
          <add origin="http://localhost:你的Angular端口"/>
        </allowOrigins>
        <allowMethods>
          <add method="GET"/>
          <add method="POST"/>
          <!-- 根据实际需求添加PUT/DELETE等方法 -->
        </allowMethods>
        <allowHeaders>
          <add header="Content-Type"/>
          <add header="Accept"/>
          <!-- 允许Angular请求携带的自定义头 -->
        </allowHeaders>
      </crossOriginResourceSharingBehavior>
    </behavior>
  </endpointBehaviors>
</behaviors>

• 将该行为绑定到WCF服务端点：

<services>
  <service name="你的服务类完整命名空间">
    <endpoint address="" 
              binding="webHttpBinding" 
              contract="你的服务契约接口完整命名空间"
              behaviorConfiguration="CorsEnabledBehavior"/>
  </service>
</services>

2. 配置webHttpBinding支持跨域 #

检查并更新WCF的绑定配置，确保开启跨域脚本访问：

<bindings>
  <webHttpBinding>
    <binding name="CorsBinding">
      <security mode="None"/>
      <!-- 若用HTTPS则改为Transport -->
      <crossDomainScriptAccessEnabled="true"/>
    </binding>
  </webHttpBinding>
</bindings>

之后将这个绑定应用到服务端点的bindingConfiguration属性上。

3. 用Angular代理绕过本地CORS限制 #

本地开发时，通过代理转发请求可以直接规避浏览器的CORS检查：

• 在Angular项目根目录创建proxy.conf.json：

{
  "/wcf-api": {
    "target": "http://localhost:4506",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

• 修改angular.json中的服务启动配置，引入代理：

"architect": {
  "serve": {
    "options": {
      "proxyConfig": "proxy.conf.json"
    }
  }
}

• 之后Angular中请求WCF服务时，将接口路径前缀改为/wcf-api，代理会自动转发到localhost:4506。

4. 校验请求方法与WCF契约的匹配性 #

确保Angular的请求方法（GET/POST等）和WCF服务契约定义完全一致：

• WCF中用[WebGet]注解对应GET请求
• 用[WebInvoke(Method = "POST")]注解对应POST请求
  方法不匹配会触发类似CORS的错误提示，需仔细核对。

5. 检查浏览器实际响应头 #

打开浏览器开发者工具（F12）的Network面板，查看请求的Response Headers：

• 确认是否存在Access-Control-Allow-Origin、Access-Control-Allow-Methods等正确的跨域头
• 如果这些头未出现，说明之前的配置未生效，需检查web.config语法是否有误，或重启WCF服务

6. 临时禁用浏览器CORS检查（仅本地调试用） #

如果只是临时测试，可以关闭浏览器的CORS限制：

• Chrome：右键快捷方式，在目标后添加 --disable-web-security --user-data-dir="C:/ChromeDevSession"（注意开头有空格）
• Edge：类似Chrome，添加 --disable-web-security --user-data-dir="C:/EdgeDevSession"
  该方法仅适用于本地开发，绝对不能用于生产环境。

内容的提问来源于stack exchange，提问作者C. Michael Warden