Access-Control-Allow-Headers:表示该站点允许那些自定义的请求头(我们通过jquery.ajax发送一个包含着token的名为"auth"的请求头,因此需要api站点设置允许"auth"请求头)
Access-Control-Allow-Methods:表示该站点允许那些请求谓词(GET,POST,OPTIONS,PUT...)
在asp.net web api中，有两种方式可以开启允许跨域访问：
第一种是在Nuget上安装"Microsoft.AspNet.WebApi.Cors"包，并对api controller使用[EnableCors]特性
第二种是在web.config中进行配置:
必须注释掉"<remove/>"以开启OPTIONS谓词处理，否则跨域访问时prefight会失败。
返回和用户相关的敏感信息的api代码如下:
//标记该controller要求身份验证 [ApiAuthorize] public class UserController : ApiController { public string Get() { //获取回用户信息(在ApiAuthorize中通过解析token的payload并保存在RouteData中) AuthInfo authInfo = this.RequestContext.RouteData.Values["auth"] as AuthInfo; if (authInfo == null) return "无效的验收信息"; else return string.Format("你好:{0},成功取得数据",authInfo.UserName); } }
前端站点
到此，api站点的代码编写完成。接下来编写前端站点的代码。
前端站点只有一个html页面,包含两个简单功能:调用登录接口进行登录，以及调用被身份验证保护的获取数据的接口
前端页面的关键脚本代码如下:
$(function () { //调用api站点的登录接口,接口在登录成功后返回一个token。 $("#login").on("click", function () { $.ajax({ url: "http://localhost:8056/api/login", data: $("form").serialize(), method: "post", success: function (data) { if (data.Success) { //为简单起见，将token保存在全局变量中。 window.token = data.Token; alert("登录成功"); } else { alert("登录失败:" + data.Message); } } }); }); //调用api站点的获取数据的接口，该接口要求身份验证。 $("#invoke").on("click", function () { $.ajax({ url: "http://localhost:8056/api/user", method: "get", headers: { "auth": window.token },//通过请求头来发送token，放弃了通过cookie的发送方式 complete: function (jqXHR,textStatus) { alert(jqXHR.responseText); }, }); }); }); </script>
接下来，在不登录和登录的情况下，调用获取数据的接口，并使用fiddler监视一下请求和响应的过程.
在不登录情况下直接按“调用接口”,服务器返回401未授权信息
以下是通信情况:
这次先登录，再调用接口，同样在fiddler中监视一下通信情况。
在fiddler中可以看到整个过程浏览器发出了3个请求，分别是登录,调用接口前的prefight和实际调用接口:
来看看每个通信的情况
登录过程:
prefight
实际发出get请求调用接口，获得数据
到此，基于JWT进行身份验证及跨域访问的demo已经完成，如有错误的地方请指正