Ajax跨域访问ASP.NET WebApi
程序员文章站
2024-03-13 10:43:39
...
参考文章：如何让你的 Asp.Net Web Api 接口，拥抱支持跨域访问。
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的示例教程
ASP.NET WebApi一般用于服务层，会涉及到多端访问。那么就一定会遇到跨域的问题。
我尝试了常见的两种跨域技术Jsonp和Cors，开发工具为VS2017，浏览器是google浏览器，.NET Framework版本为4.5.2
1.建立了两个工程目录，ASP.NET和ASP.NET WebApi，ASP.NET是客户端，WebApi是服务器端
2.在ASP.NET下新建html页面，里面放置了一个表单，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form id="form1" name="form1">
<input type="hidden" name="action" value="AddUser" />
<table>
<tr>
<td>
用户名：
</td>
<td>
<input type="text" name="UserName" />
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="PassWord" />
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<label for="radioMale">男：</label>
<input type="radio" id="radioMale" checked="checked" name="Sex" value="male" />
<label for="radioFemale">女：</label>
<input type="radio" id="radioFemale" name="Sex" value="female" />
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<select name="Year">
<option>1990</option>
<option>1991</option>
<option>1992</option>
</select>
<select name="Month">
<option>01</option>
<option>02</option>
<option>03</option>
</select>
<select name="Day">
<option>28</option>
<option>29</option>
<option>30</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" />
<input type="button" value="跨域提交" id="buttonJsonp" />
<input type="button" value="跨域提交1" id="buttonCors" />
</td>
</tr>
</table>
</form>
<script src="../../Plugins/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var form1 = $("#form1");
//用Jsonp实现跨域提交，只支持Get请求，支持低版本的浏览器
form1.find("#buttonJsonp").on('click', function () {
$.ajax({
type: "GET",
dataType: "jsonp",
url: "http://localhost:4418/api/User",
data: form1.serialize(),
jsonpCallback:"cb"
}).success(function (data) {
console.log("请求成功1");
console.log(data);
}).error(function (data) {
console.log("请求失败1");
console.log(data);
}).complete(function (data) {
console.log("请求完成1");
console.log(data);
});;
});
//用Cors实现跨域提交，支持Get，Post
form1.find("#buttonCors").on('click', function () {
$.ajax({
type: "POST",
dataType: "json",
url: "http://localhost:4418/api/User",
data: form1.serialize()
}).success(function (data) {
console.log("请求成功");
console.log(data);
}).error(function (data) {
console.log("请求失败");
console.log(data);
}).complete(function (data) {
console.log("请求完成");
console.log(data);
});
});
//同源提交请求
form1.find(":input[type='submit']").on('click', function () {
try
{
$.ajax({
type: "POST",
dataType: "json",
url: "RequestHandler.ashx",
data: form1.serialize()
}).success(function (data) {
console.log("请求成功");
console.log(data);
}).error(function (data) {
console.log("请求失败");
console.log(data);
}).complete(function (data) {
console.log("请求完成");
console.log(data);
});
console.log(form1.serialize());
}
catch(e)
{
console.log(e);
}
finally
{
return false;
}
});
</script>
</body>
</html>3.在WebApi中新建一个UserController，分别重写Get和Post方法
//处理Jsonp的请求
public IDictionary<string,object> Get(string action, string UserName, string PassWord,
string Sex,string Year,string Month,string Day)
{
Dictionary<string, object> dict = new Dictionary<string, object>();
dict.Add("stateCode", 1);
return dict;
}
//处理Cors的请求
//public IDictionary<string,object> Post(string action,string UserName,string PassWord,
// string Sex,string Year,string Month,string Day)
public IDictionary<string,object> Post(User user)
{
Dictionary<string, object> dict = new Dictionary<string, object>();
dict.Add("stateCode", 2);
return dict;
}4.在Nuget上安装Cors安装包
然后在WebApiConfig文件下添加如下内容：
public static void Register(HttpConfiguration config)
{
// Web API 配置和服务
EnableCrossSiteRequests(config);
// Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
/// <summary>
/// 允许跨域调用
/// </summary>
/// <param name="config"></param>
private static void EnableCrossSiteRequests(HttpConfiguration config)
{
//对所有的请求来源没有任何限制
var cors = new EnableCorsAttribute(
origins: "*",
headers: "*",
methods: "*"
);
config.EnableCors(cors);
}最后，点击跨域提交和跨域提交1按钮，分别如下显示：