带有自定义标头的 Ajax 请求发送到启用 CORS 的 Web API 服务器
Posted
技术标签:
【中文标题】带有自定义标头的 Ajax 请求发送到启用 CORS 的 Web API 服务器【英文标题】:Ajax request with custom header sent to Web API server with CORS enabled 【发布时间】:2015-05-26 10:42:13 【问题描述】:我正在尝试正确设置 Web API 网络服务以使用 CORS,但最近运气不佳。
我有一个来自移动应用程序的 html 页面,它使用 ajax 请求来获取一些数据:
Webservices.GetUserLevel = function()
var userLevel = null;
$.ajax(
url: _CONNECTION_STRING + "getuserlevel/" + _USER_PIN,
contentType:'application/json; charset=utf-8',
type: 'GET',
async: false,
cache: false,
crossDomain: true,
data:
BlackberryPin: _USER_PIN
,
beforeSend: function(xhr)
xhr.setRequestHeader('BlackberryPin', _USER_PIN);
,
success: function(data)
userLevel = data;
,
error: function(xhr, ajaxOptions, thrownError)
Webservices.HandleError(xhr, ajaxOptions, thrownError);
);
return userLevel;
我从那个电话中得到的回应是:
XMLHttpRequest 无法加载 http://.. urlGoesHere ../getuserlevel/2B65FA52?BlackberryPin=2B65FA52&_=1427109244103。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,Origin 'http://localhost:3726' 不允许访问。响应的 HTTP 状态代码为 404。
在 webservice 上,控制器方法如下所示:
public UserLevel GetUserLevel(string pin)
return _service.GetUserLevel(pin);
我在我的 web 服务的 web.config 中启用了 CORS:
<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Authorization, Accept, X-Requested-With, Origin, BlackberryPin" />
<add name="Access-Control-Allow-Methods" value="OPTIONS, TRACE, GET, HEAD, POST, PUT" />
</customHeaders>
</httpProtocol>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
我们的 web api 配置相当简单:
public static class WebApiConfig
public static void Register(HttpConfiguration config)
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/controller/action/id",
defaults: new id = RouteParameter.Optional
);
config.Filters.Add(new HandleExceptionAttribute());
config.Filters.Add(new WebAuthorisationFilter());
我们设置了一个网络授权过滤器来检查自定义标头“BlackberryPin”,并将拒绝不包含该标头和有效品脱的请求。在使用远程调试器测试 web 服务时,我发现它没有访问授权过滤器代码,所以我怀疑这里的路由/CORS 配置有问题。
感谢您提供的任何帮助或想法。
更新:
我还在控制器方法上尝试了以下数据注释:
[Route("api/erouter/GetUserLevel/pin")]
[EnableCors("*", "Accept, Origin, Content-Type, OPTIONS, Pin, BlackberryPin", "GET")]
public UserLevel GetUserLevel(string pin)
return _service.GetUserLevel(new ERouterRequest(pin,null));
当我使用 fiddler 调用此方法(作为 GET)时,它成功通过。但是,使用 ajax 调用它会在主 GET 调用之前发送的预检 OPTIONS 请求上返回 405 错误。
【问题讨论】:
【参考方案1】:仔细查看了 Firebug 中 ajax OPTIONS 调用中的请求标头。
事实证明,我在配置键 Access-Control-Allow-Headers 下的 web.config 中遗漏了一些已接受的标头。我添加了标题:Accept、Accept-Encoding、Accept-Language、Cache-Control、Access-Control-Request-Header、Access-Control-Request-Method。
【讨论】:
请您实际粘贴web.config
中的相关位吗?
您可以使用标签 name="Access-Control-Allow-Headers" 设置 CORS 标头,例如以上是关于带有自定义标头的 Ajax 请求发送到启用 CORS 的 Web API 服务器的主要内容,如果未能解决你的问题,请参考以下文章