AngularJS 1.5.0设置请求头后,C#后端无法获取请求头值
解决AngularJS请求头在C#后端无法获取的问题
首先,先修正AngularJS代码里的一个小错误:你在$http请求配置里用了setRequestHeader,这不是AngularJS的正确配置项,应该替换为headers。虽然你说Chrome能看到请求头,但规范写法能避免潜在问题:
// 全局设置请求头 $http.defaults.headers.common["User"] = "MjM="; $http.defaults.headers.common["Password"] = "MjM="; // 发起请求(修正headers配置) $http({ method: "GET", url: "http://localhost/route/route/", headers: { "User": $http.defaults.headers.common.User, "Password": $http.defaults.headers.common.Password } });
接下来针对后端无法获取请求头的问题,从以下几个方面排查:
1. 确保CORS配置正确生效
首先确认你的ASP.NET Web API已经启用了CORS中间件:
- 在
WebApiConfig.cs中添加以下代码:
using System.Web.Http.Cors; public static class WebApiConfig { public static void Register(HttpConfiguration config) { // 启用CORS config.EnableCors(); // 其他路由配置... } }
如果没有启用CORS中间件,[EnableCors]属性不会起作用。
另外,调整[EnableCors]属性的headers参数,确保包含你的自定义请求头(HTTP头不区分大小写,但建议保持前后端写法一致):
[EnableCors(origins: "http://localhost:61291", headers: "User, Password", methods: "*")]
2. 正确处理OPTIONS预检请求
当跨域请求包含自定义头时,浏览器会先发一个OPTIONS预检请求,后端需要正确响应这个请求,返回允许的头信息。你已经标记了[HttpOptions]和[AcceptVerbs("OPTIONS")],可以添加一个简单的OPTIONS处理逻辑确保返回正确的CORS头:
public HttpResponseMessage Options() { var response = new HttpResponseMessage(HttpStatusCode.OK); response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:61291"); response.Headers.Add("Access-Control-Allow-Headers", "User, Password, Content-Type"); response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); return response; }
这样能确保预检请求得到正确响应,浏览器才会发送实际的GET请求。
3. 调整请求头的获取方式
在ASP.NET中,请求头的键可能会被规范化(比如转为小写),可以尝试用小写的键来获取:
var token = Datos.GetValues("user"); // 用小写的"user"代替"User" var password = Datos.GetValues("password");
或者更稳妥的方式,遍历Headers集合找到对应的键(不区分大小写):
var userHeader = Request.Headers.AllKeys.FirstOrDefault(k => k.Equals("User", StringComparison.OrdinalIgnoreCase)); var token = userHeader != null ? Request.Headers.GetValues(userHeader).FirstOrDefault() : null;
4. 验证后端实际接收的请求头
可以在后端先打印所有请求头,确认是否真的接收到了目标头信息:
foreach (var header in Request.Headers) { Debug.WriteLine($"{header.Key}: {string.Join(", ", header.Value)}"); }
这样能直观看到后端实际收到的所有请求头,排除前端发送环节的问题。
内容的提问来源于stack exchange,提问作者alberto
相关产品推荐
相关产品推荐

