c# WebApi之解决跨域问题：Cors
</div>
</div>
</div>
<article class="baidu_pl">
<div id="article_content" class="article_content clearfix">
<div class="article-copyright">
<span class="creativecommons">
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
</a>
<span>
版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。 </span>
<div class="article-source-link2222">
本文链接：<a href="https://blog.csdn.net/lwpoor123/article/details/78457589">https://blog.csdn.net/lwpoor123/article/details/78457589</a>
</div>
</span>
</div>
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css">
<div id="content_views" class="markdown_views">
<!-- flowchart 箭头图标 勿删 -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>
<p>WebApi相关文章：</p>
- C# 搭建一个简单的Web API项目
- C# WebApi 路由配置
- c# WebApi之解决跨域问题：Cors
- c# WebApi之身份验证：Basic基础认证
- c# WebApi之接口返回类型详解
什么是跨域问题
出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaScript或Cookie只能访问同域下的内容。由于这个原因，我们不同站点之间的数据访问会被拒绝。
Cors解决跨域问题
跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求。
解决跨域问题实例
下面就写一个简单是实例来说明如何使用CORS解决跨域
1、建立测试项目
1.1、新建两个ASP.NET Web 应用程序，作为Web站点和WebApi站点：
1.2、配置WebApi站点
在WebApiConfig.cs文件里面配置Web API 路由，指向具体的action
//Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi1",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);- 1
- 2
- 3
- 4
- 5
- 6
- 7
在控制器中新建一个测试方法，用于返回请求数据：
[Authorize]
[RoutePrefix("api/Account")]
public class AccountController : ApiController
{
/// <summary>
/// 得到所有数据
/// </summary>
/// <returns>返回数据</returns>
[HttpGet]
public string GetAllData()
{
return "Success";
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
启动Web API项目，站点端口号为：8476
1.3、配置Web站点
新建一个index测试页面：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
测试结果：
<div id="div_test">
hello world
</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
public ActionResult Index()
{
return View();
}- 1
- 2
- 3
- 4
用jquery 的 ajax处理请求：
<script>
var ApiUrl = "http://localhost:8476/";
$(function () {
$.ajax({
type: "get",
dataType:"json",
url: ApiUrl + "api/Account/GetAllData",
data: {},
success: function (data, status) {
if (data == "success") {
$("#div_test").html(data);
}
},
error: function (e) {
$("#div_test").html("Error");
},
complete: function () {
}
});
});
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
2、测试
在不做任何处理的情况下，运行Web项目，结果为：
可以看到浏览器拒绝了我们的跨域访问。
3、使用CORS跨域
首先安装CORS，在WebApiCors项目上面使用Nuget搜索“microsoft.aspnet.webapi.cors”，安装第一个
当我们安装这个包之后，现有的packages目录下会添加两个名称分别为“Microsoft.AspNet.Cors.5.2.3”和“Microsoft.AspNet.WebApi.Cors.5.2.3”，针对保存其中的两个程序集（System.Web.Cors.dll和System.Web.Http.Cors.dll）的引用被自动添加到WebApiCors项目中
然后在App_Start文件夹下面的WebApiConfig.cs文件夹配置跨域
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
//跨域配置
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
// Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi1",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
我们暂定三个“*”号，当然，在项目中使用的时候一般需要指定对哪个域名可以跨域、跨域的操作有哪些等等。这个下面介绍
重新运行：
谷歌
IE7、IE8、IE9
我都已经设置跨域了呀，怎么IE7、8、9还是不行呢？这个时候就有必要说说CORS的浏览器支持问题了。网上到处都能搜到这张图：
可以看到IE8、9只有部分浏览器支持，那么如何解决IE浏览器支持问题呢，其实在调用处指定 jQuery.support.cors = true; 这一句就能解决IE8、9的问题了：
<script>
jQuery.support.cors = true;
var ApiUrl = "http://localhost:8476/";
$(function () {
$.ajax({
type: "get",
url: ApiUrl + "api/Account/GetAllData",
data: {},
success: function (data, status) {
if (status == "success") {
$("#div_test").html(data);
}
},
error: function (e) {
$("#div_test").html("Error");
},
complete: function () {
}
});
});
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
4、CORS的具体参数设置。
上文我们用的是：config.EnableCors(new EnableCorsAttribute(““, ““, “*”));，这里的*号表示只要别人知道你的url，任何请求都能返回资源，这是不安全的，所以需要进行访问控制。
配置方法一
在Web.Config配置：
<appSettings>
<add key="cors:allowedMethods" value="*"/>
<add key="cors:allowedOrigin" value="http://localhost:8610"/>
<add key="cors:allowedHeaders" value="*"/>
</appSettings>- 1
- 2
- 3
- 4
- 5
然后在WebApiConfig.cs文件配置
public static void Register(HttpConfiguration config)
{
//跨域配置
var allowedMethods = ConfigurationManager.AppSettings["cors:allowedMethods"];
var allowedOrigin = ConfigurationManager.AppSettings["cors:allowedOrigin"];
var allowedHeaders = ConfigurationManager.AppSettings["cors:allowedHeaders"];
var geduCors = new EnableCorsAttribute(allowedOrigin, allowedHeaders, allowedMethods)
{
SupportsCredentials = true
};
config.EnableCors(geduCors);
//config.EnableCors(new EnableCorsAttribute("*", "*", "*"));- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
配置方法二
如果你只想对某一些api做跨域，可以直接在API的类上面使用特性标注即可。
[EnableCors(origins: "http://localhost:8610/", headers: "*", methods: "GET,POST,PUT,DELETE")]
public class AccountController : ApiController
{
/// <summary>
/// 得到所有数据
/// </summary>
/// <returns>返回数据</returns>
[HttpGet]
public string GetAllData()
{
return "Success";
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-095d4a0b23.css" rel="stylesheet">
</div>
</article>
<div class="postTime">
<div class="article-bar-bottom">
<div class="reward-user-box">
<span class="reward-word">有 <span class="num">0</span> 个人打赏</span>
</div>
</div>
<span class="time">
文章最后发布于: 2017-11-06 14:48:24 </span>
</div>