您的位置：首页 > 编程语言 > ASP

通过微软的cors类库，让ASP.NET Web API 支持 CORS

2016-10-14 09:23 573 查看

1.创建WebAPI（myservice.azurewebsites.net）

这个简单放上图：

1.1

1.2

1.3

1.4

1.5

1.6将下面的code替代原来的TestController

usingSystem.Net.Http;
usingSystem.Web.Http;

namespaceWebService.Controllers
{
publicclassTestController:ApiController
{
publicHttpResponseMessageGet()
{
returnnewHttpResponseMessage()
{
Content=newStringContent("GET:Testmessage")
};
}

publicHttpResponseMessagePost()
{
returnnewHttpResponseMessage()
{
Content=newStringContent("POST:Testmessage")
};
}

publicHttpResponseMessagePut()
{
returnnewHttpResponseMessage()
{
Content=newStringContent("PUT:Testmessage")
};
}
}
}

1.7可以测试创建的WebAPI是否可以正常工作

2.创建Client端(myclilent.azurewebsites.net)

这也是可以简单上图：

2.1

2.2

2.3找到Client端的Views/Home/Index.cshtml，用下面代码替代

<div>
<selectid="method">
<optionvalue="get">GET</option>
<optionvalue="post">POST</option>
<optionvalue="put">PUT</option>
</select>
<inputtype="button"value="Tryit"onclick="sendRequest()"/>
<spanid='value1'>(Result)</span>
</div>

@sectionscripts{
<script>
varserviceUrl='http://myservice.azurewebsites.net/api/test';//ReplacewithyourURI.

functionsendRequest(){
varmethod=$('#method').val();

$.ajax({
type:method,
url:serviceUrl
}).done(function(data){
$('#value1').text(data);
}).error(function(jqXHR,textStatus,errorThrown){
$('#value1').text(jqXHR.responseText||textStatus);
});
}
</script>
}

2.4用例外一个域名发布网站，然后进入Index页面，选择GET,POST,PUT等，点击Tryit按钮，就会发送请求到WebAPI,因为WebAPI没有开启CORS，而通过AJAX请求，浏览器会提示错误

3.WebAPI支持CORS

3.1打开VS，工具->库程序包管理器->程序包管理器控制台，输入下列命令：Install-PackageMicrosoft.AspNet.WebApi.Cors-Version5.0.0

注意：目前Nuget上面最新的版本是5.2.0，但是我测试，下载的时候，会有一些关联的类库不是最新的，System.Net.Http.Formatting要求是5.2，我在网上找不带这dll,因此建议安装：Microsoft.AspNet.WebApi.Cors5.0就OK了。

Nuget科普link:'target='_blank'>http://www.cnblogs.com/dubing/p/3630434.html

3.2打开WebApiConfig.Register添加config.EnableCors()

usingSystem.Web.Http;
namespaceWebService
{
publicstaticclassWebApiConfig
{
publicstaticvoidRegister(HttpConfigurationconfig)
{
//Newcode
config.EnableCors();

config.Routes.MapHttpRoute(
name:"DefaultApi",
routeTemplate:"api/{controller}/{id}",
defaults:new{id=RouteParameter.Optional}
);
}
}
}

3.3添加[EnableCors]特性到TestController

usingSystem.Net.Http;
usingSystem.Web.Http;
usingSystem.Web.Http.Cors;

namespaceWebService.Controllers
{
[EnableCors(origins:"http://myclient.azurewebsites.net",headers:"*",methods:"*")]
publicclassTestController:ApiController
{
//Controllermethodsnotshown...
}
}

3.4回到Client端，这时再次发送请求，会提示成功信息，证明CORS已经实现了。

4.为[EnableCors]设置到Action,Controller,Globally

4.1Action

publicclassItemsController:ApiController
{
publicHttpResponseMessageGetAll(){...}

[EnableCors(origins:"http://www.example.com",headers:"*",methods:"*")]
publicHttpResponseMessageGetItem(intid){...}

publicHttpResponseMessagePost(){...}
publicHttpResponseMessagePutItem(intid){...}
}

4.2Controller

[EnableCors(origins:"http://www.example.com",headers:"*",methods:"*")]
publicclassItemsController:ApiController
{
publicHttpResponseMessageGetAll(){...}
publicHttpResponseMessageGetItem(intid){...}
publicHttpResponseMessagePost(){...}

[DisableCors]
publicHttpResponseMessagePutItem(intid){...}
}

4.3Globally

publicstaticclassWebApiConfig
{
publicstaticvoidRegister(HttpConfigurationconfig)
{
varcors=newEnableCorsAttribute("www.example.com","*","*");
config.EnableCors(cors);
//...
}
}

5.[EnableCors]工作原理

要理解CORS成功的原理，我们可以来查看一下

跨域的请求

GEThttp://myservice.azurewebsites.net/api/testHTTP/1.1
Referer:http://myclient.azurewebsites.net/Accept:*/*
Accept-Language:en-US
Origin:http://myclient.azurewebsites.netAccept-Encoding:gzip,deflate
User-Agent:Mozilla/5.0(compatible;MSIE10.0;WindowsNT6.2;WOW64;Trident/6.0)
Host:myservice.azurewebsites.net

当发送请求的时候，浏览器会将“Origin”的请求头发送给服务端，如果服务端允许跨域请求，那么响应回来的请求头，添加“Access-Control-Allow-Origin”，以及将请求过来的域名的value添加到Access-Control-Allow-Origin，浏览器接收到这个请求头，则会显示返回的数据，否则，即使服务端成功返回数据，浏览器也不会接收

服务器的响应

HTTP/1.1200OK
Cache-Control:no-cache
Pragma:no-cache
Content-Type:text/plain;charset=utf-8
Access-Control-Allow-Origin:http://myclient.azurewebsites.netDate:Wed,05Jun201306:27:30GMT
Content-Length:17

GET:Testmessage

6.自定义CORSPolicyProviders

6.1除了使用自带的[EnableCors]特性外，我们可以自定义自己的[EnableCors]。首先是要继承Attribute和ICorsPolicyProvider接口

[AttributeUsage(AttributeTargets.Method|AttributeTargets.Class,AllowMultiple=false)]
publicclassMyCorsPolicyAttribute:Attribute,ICorsPolicyProvider
{
privateCorsPolicy_policy;

publicMyCorsPolicyAttribute()
{
//CreateaCORSpolicy.
_policy=newCorsPolicy
{
AllowAnyMethod=true,
AllowAnyHeader=true
};

//Addallowedorigins.
_policy.Origins.Add("http://myclient.azurewebsites.net");
_policy.Origins.Add("http://www.contoso.com");
}

publicTask<CorsPolicy>GetCorsPolicyAsync(HttpRequestMessagerequest)
{
returnTask.FromResult(_policy);
}
}

实现后，可以添加自己定义的[MyCorsPolicy]

[MyCorsPolicy]
publicclassTestController:ApiController
{
..//

6.2或者你也可以从配置文件中读取允许的域名

publicclassCorsPolicyFactory:ICorsPolicyProviderFactory
{
ICorsPolicyProvider_provider=newMyCorsPolicyProvider();

publicICorsPolicyProviderGetCorsPolicyProvider(HttpRequestMessagerequest)
{
return_provider;
}
}

publicstaticclassWebApiConfig
{
publicstaticvoidRegister(HttpConfigurationconfig)
{
config.SetCorsPolicyProviderFactory(newCorsPolicyFactory());
config.EnableCors();

//...
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航