ASP.NET Web API与Angular 2集成遇405错误，请求排查

你遇到的Failed to load "my-url": Response for preflight has invalid HTTP status code 405和OPTIONS "my-url" 405 (Method Not Allowed)错误，主要是跨域资源共享（CORS）配置缺失，再加上Web API的参数绑定逻辑和返回值设计有问题导致的，我来一步步帮你解决：

一、核心问题分析 #

1. CORS预请求失败：Angular前端和Web API运行在不同端口（比如前端4200、API 65440），浏览器会先发OPTIONS预请求验证跨域权限，但你的Web API没有配置CORS支持，直接拒绝了这个请求，返回405。
2. 参数绑定不匹配：前端发送的是包含UserName和Password的JSON对象，但Web API的postvalidUser方法接收两个独立字符串参数，默认模型绑定无法正确解析JSON请求体。
3. 无有效响应返回：Web API方法是void类型，没有返回任何HTTP响应，前端调用result.json()时会因无响应内容报错。

二、具体修复步骤 #

1. 配置Web API的CORS支持 #

首先启用CORS允许跨域请求：

• 打开NuGet包管理器，安装Microsoft.AspNet.WebApi.Cors包
• 在App_Start/WebApiConfig.cs中添加全局CORS配置：

using System.Web.Http;
using System.Web.Http.Cors;

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // 生产环境建议替换为具体允许的域名，比如"http://localhost:4200"
        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);

        // 保留原有路由配置
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

2. 修正Web API的参数绑定与返回值 #

先创建一个接收登录参数的模型类：

public class LoginViewModel
{
    public string UserName { get; set; }
    public string Password { get; set; }
}

然后修改postvalidUser方法，用模型接收参数并返回标准HTTP响应：

using System.Web.Http;

public class UserController : ApiController
{
    [HttpPost]
    public IHttpActionResult PostValidUser([FromBody]LoginViewModel loginModel)
    {
        try
        {
            if (loginModel == null || string.IsNullOrEmpty(loginModel.UserName) || string.IsNullOrEmpty(loginModel.Password))
            {
                return BadRequest("用户名或密码不能为空");
            }

            // 用FirstOrDefault替代循环，提升查询效率
            var user = uData.Users.FirstOrDefault(x => x.UserName == loginModel.UserName);
            if (user != null && user.Password == loginModel.Password)
            {
                // 返回登录成功的响应，可扩展返回用户信息或token
                return Ok(new { Success = true, Message = "登录成功" });
            }
            else
            {
                return Unauthorized(); // 返回401未授权状态码
            }
        }
        catch (Exception ex)
        {
            return InternalServerError(ex); // 返回500服务器错误
        }
    }
}

注：方法名改为PostValidUser符合Web API命名约定，POST请求会自动匹配以Post开头的方法。

3. 调整前端代码适配响应 #

修改login.component.ts的订阅逻辑，处理不同响应状态：

export class LoginComponent implements OnInit {
    constructor(private _loginservices: LoginService) { }
    ngOnInit() { }
    OnClick(UserName: string, Password:string) {
        this._loginservices.postvalidUser(UserName, Password)
            .subscribe(
                (response) => {
                    console.log(response.Message);
                    // 这里可添加跳转首页、保存用户信息等逻辑
                },
                (error) => {
                    if (error.status === 401) {
                        console.log("用户名或密码错误");
                    } else {
                        console.log("登录失败：", error.message);
                    }
                }
            );
    }
}

三、验证修复效果 #

重启Web API和Angular应用，输入登录凭证测试，此时应该不会再出现405错误，且能正确接收登录结果。

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