如何在ASP.NET Web API中配置CORS的OPTIONS请求解决Angular5跨域

看起来你遇到的核心问题是浏览器的跨域预检OPTIONS请求没有被服务器正确处理，导致实际的POST请求根本无法发送，最终返回400 Bad Request。Postman正常是因为它不会触发浏览器的跨域预检机制，我们可以从以下几个方向排查和修复：

1. 确保CORS配置覆盖所有必要场景 #

你已经在Web.config和WebApiConfig.cs做了配置，但可能存在遗漏：

Web.config 配置补充 #

要明确允许OPTIONS请求，并且包含自定义的No-Auth头部在允许列表里：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <!-- 允许所有域（生产环境建议指定具体域名） -->
      <add name="Access-Control-Allow-Origin" value="*" />
      <!-- 允许需要的请求方法 -->
      <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
      <!-- 包含自定义的No-Auth头，以及Content-Type -->
      <add name="Access-Control-Allow-Headers" value="Content-Type, No-Auth" />
    </customHeaders>
  </httpProtocol>
  <!-- 确保OPTIONS请求被正确处理，不被拦截 -->
  <handlers>
    <remove name="OPTIONSVerbHandler" />
    <add name="OPTIONSVerbHandler" path="*" verb="OPTIONS" modules="ProtocolSupportModule" resourceType="Unspecified" requireAccess="None" />
  </handlers>
</system.webServer>

WebApiConfig.cs 全局CORS配置 #

要确保启用CORS时，明确指定允许的头部和方法，不要遗漏OPTIONS：

public static void Register(HttpConfiguration config)
{
    // 配置CORS：允许所有域、指定允许的头部、允许的方法
    var corsPolicy = new EnableCorsAttribute(
        origins: "*",
        headers: "Content-Type, No-Auth",
        methods: "GET, POST, OPTIONS"
    );
    config.EnableCors(corsPolicy);

    // 其他Web API路由和配置...
}

2. 优化Angular请求代码，避免参数拼接错误 #

手动拼接参数如果遇到特殊字符（比如用户名/密码里的&、=），会导致服务器解析参数失败返回400。建议用HttpParams来构建请求体：

userAuthentication(userDetails: LoginUser): Observable<LoginUser> {
  // 使用HttpParams安全构建表单参数
  const requestBody = new HttpParams()
    .set('username', userDetails.username)
    .set('password', userDetails.password)
    .set('grant_type', 'password');

  const reqHeader = new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
    'No-Auth': 'True'
  });

  // 注意要把HttpParams转为字符串
  return this.http.post<LoginUser>(`${this._baseUrl}Token`, requestBody.toString(), { headers: reqHeader })
    .pipe(catchError(this.handleError));
}

3. 排查预检请求的响应 #

打开浏览器开发者工具的Network面板，找到类型为OPTIONS的请求（针对/Token接口），检查它的响应头：

• 必须包含Access-Control-Allow-Origin，值要匹配你的前端域名（或者*）
• 必须包含Access-Control-Allow-Methods，里面要有POST
• 必须包含Access-Control-Allow-Headers，里面要有Content-Type和No-Auth

如果OPTIONS请求本身就返回400，那问题就出在服务器对预检请求的处理上，需要回到第一步调整CORS配置。

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