关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案
时间:2014-7-3
问题描述
当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况。
重现方式
-
使用模板创建一个最简单的ASP.NET Web API项目,调试起来确认能正常工作
-
创建另外一个项目,仅仅包含一个HTML页面,发起AJAX的调用
-
在浏览器中打开这个网页,我们会发现如下的错误(405:Method Not Allowed)
【备注】同样的情况,也发生在ASP.NET MVC中。某些时候,MVC也可以直接用来开发服务,与WebAPI相比各有优缺点。下面是一个利用MVC开发的服务的例子
原因分析
跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服务器明确地告知它允许跨域调用。
所以,跨域的问题虽然是由于浏览器的行为产生出来的,但解决的方法却是在服务端。因为不可能要求所有客户端降低安全性。
解决方案
针对ASP.NET MVC和ASP.NET Web API两种项目类型,我做了一些研究,确定下面的方案是可行的。
针对ASP.NET MVC,只需要在web.config中添加如下的内容即可
<system.webServer>
</system.webServer>
针对ASP.NET Web API,除了上面这样的设置,还需要添加一个特殊的设计,就是为每个APIController添加一个OPTIONS的方法,但无需返回任何东西。
public string Options()
{
return null; // HTTP 200 response with empty body
}
【备注】这个功能也可以进行一些研究,设计成Filter的形式可能就更好了。
如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。
由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题。
刚开始没做任何处理,用jsonp的方式调用 web api 接口,总是报一个错误,如下:
如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的:
{"YourSignature":"嫁人要嫁程序员,钱多话少死得早"}
然而,JSONP请求期望得到这样的JSON:
jQuery123456([{"YourSignature":"嫁人要嫁程序员,钱多话少死得早"}])
所以我们需要对WebAPI做拓展,让它支持这样的callback
解决方案如下:
只需要给全局注册一个JsonCallbackAttribute,就可以判断接口的访问是属于跨域,还是非跨域,正常的返回。
因为我们的接口,可能是用来给 移动端(Android 、IOS)做数据接口,也有可能是给网站用,所以,考虑到可能存在跨域的问题。
GlobalConfiguration.Configuration.Filters.Add(new JsonCallbackAttribute());
public class JsonCallbackAttribute : ActionFilterAttribute
{
private const string CallbackQueryParameter = "callback";
public override void OnActionExecuted(HttpActionExecutedContext context)
{
var callback = string.Empty;
if (IsJsonp(out callback))
{
var jsonBuilder = new StringBuilder(callback);
jsonBuilder.AppendFormat("({0})", context.Response.Content.ReadAsStringAsync().Result);
context.Response.Content = new StringContent(jsonBuilder.ToString());
//context.Response.Content = new StringContent("C(\"a\")");
}
base.OnActionExecuted(context);
}
private bool IsJsonp(out string callback)
{
callback = System.Web.HttpContext.Current.Request.QueryString[CallbackQueryParameter];
return !string.IsNullOrEmpty(callback);
}
结合下面图片不难开出,请求的地址带回了,callback的参数标识。
测试代码如下:
<html>
<head>
<title>团队信息列表</title>
<script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.7.1.js")"></script>
</head>
<body>
<ul id="contacts"></ul>
<script type="text/javascript">
$(function () {
$.ajax({
Type: "GET",
url: "http://app.uni2uni.com/api/CloudService/GetAllGroup",
dataType: "jsonp",
success: listContacts
});
});
function listContacts(contacts) {
alert(contacts);
$.each(contacts.data, function (index, contact) {
var html = "<li><ul>";
html += "<li>GroupName: " + contact.GroupName + "</li>";
html += "<li>GroupPicture:" + contact.GroupPicture + "</li>";
html += "</ul>";
$("#contacts").append($(html));
});
}
</script>
</body>
</html>
返回接口如下:
相关文章推荐:diaosbook.com/Post/2013/1…
C# 后台 调用 WebApi
2018年04月24日 20:30:49 AndyLee_ 阅读数:757
Post:
private void button1_Click(object sender, EventArgs e)
{
string ss= HttpPost("http://localhost:41558/api/Demo/PostXXX", "{Code:\"test089\",Name:\"test1\"}");
}
public static string HttpPost(string url, string body)
{
//ServicePointManager.ServerCertificateValidationCallback = new RemoteCertificateValidationCallback(CheckValidationResult);
Encoding encoding = Encoding.UTF8;
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
request.Method = "POST";
request.Accept = "text/html, application/xhtml+xml, */*";
request.ContentType = "application/json";
byte[] buffer = encoding.GetBytes(body);
request.ContentLength = buffer.Length;
request.GetRequestStream().Write(buffer, 0, buffer.Length);
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
using (StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8))
{
return reader.ReadToEnd();
}
}
Get:
private void button1_Click(object sender, EventArgs e)
{
string ss = HttpGet("http://localhost:41558/api/Demo/GetXXX?Name=北京");
}
public static string HttpGet(string url)
{
//ServicePointManager.ServerCertificateValidationCallback = new RemoteCertificateValidationCallback(CheckValidationResult);
Encoding encoding = Encoding.UTF8;
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
request.Method = "GET";
request.Accept = "text/html, application/xhtml+xml, */*";
request.ContentType = "application/json";
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
using (StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8))
{
return reader.ReadToEnd();
}
}
1、什么是WebApi,它有什么用途?
Web API是一个比较宽泛的概念。这里我们提到Web API特指ASP.NET MVC Web API。在新出的MVC中,增加了WebAPI,用于提供REST风格的WebService,新生成的WebAPI项目和典型的MVC项目一样,包含主要的Models、Views、Controllers等文件夹和Global.asax文件。Views对于WebAPI来说没有太大的用途,Models中的Model主要用于保存Service和Client交互的对象,这些对象默认情况下会被转换为Json格式的数据迚行传输,Controllers中的Controller对应于WebService来说是一个Resource,用于提供服务。和普通的MVC一样,Global.asax用于配置路由规则,个人的理解MVC控制器中一般方法返回的是一个视图而Api返回的是数据,可以是List、Json等格式。对于WebAPI来说它最初被设计为和WCF一样的客户端口、服务端口两套结构我们到现在还没有提到客户端口是因为我们的请求别的方式来封装成HTTP请求接收收HTTP相应的比如AJAX和Form表单提交。接下来我们用VS2017新建一个webApi项目。
2、打开VS2017 点文件-----> 新建---->项目。快捷键(Ctrl+Shift+N)
Web里面的Asp.Net Web 应用程序
上面一定要选Web API 。项目建好了 我先做一个从数据库取出数据在调用的栗子。
3、在控制器文件夹右键---->添加---->控制器。选择Web API2 Controller Empty点确定取名Customer 因为后面要操作数据库这张表 ,点add完成
这时候App_Satrt文件夹下面多了一个文件WebApiConfig.cs,这个文件是它的路由
由于以前都是用原生的sql访问数据库 所以现在也说一下 原生的sql 在asp.net MVC中的使用不用EF连接 后面也使用EF
4、在Models文件夹下面建立模型类Customer类与SqlDB类,这里没有分三层架构就简单的写在一起了理解就行(SqlDB类这里有《Asp.Net中对操作Sql Server 简单处理的SqlDB类》)
public class Customer
{
//ID
public int ID { get; set; }
//姓名
public string Name { get; set; }
//学号
public string Number { get; set; }
//性别1男2女
public int Sex { get; set; }
//院系
public string Department { get; set; }
//专业
public string Manjor { get; set; }
//年级
public int Class { get; set; }
//联系方式
public string Mobile { get; set; }
}
在项目的web.config配置文件里面一定要加数据库连接字符串配置
<connectionStrings>
<!--连接字符串-->
<add name="SqlConn" connectionString=" Data Source=.;Initial Catalog=OneCardSystem;Integrated Security=True" />
</connectionStrings>
5、在API控制器里面写个方法返回List类型的数据
这个API控制器一定是继承ApiController这个控制器的
public class CustomerController : ApiController
{
Customer customer = new Customer();
public List<Customer> GetCustomerAll()
{
//sql语句
string _sql = "Select * from Customer";
//实例SqlDB类
SqlDB sb = new SqlDB();
//定义List储存
List<Customer> list = new List<Customer>();
//获取数据
var data = sb.ExecuteDataSet(_sql).Tables[0].Rows;
//遍历data
foreach(DataRow item in data)
{
var customer = new Customer()
{
//对应字段
ID = Convert.ToInt32(item["ID"].ToString()),
Number= item["Number"].ToString(),
Name= item["Name"].ToString(),
Manjor= item["Manjor"].ToString(),
Mobile= item["Mobile"].ToString()
};
//逐条添加到list里面
list.Add(customer);
}
//返回list
return list;
}
}
6、运行项目默认来到Home控制器所对应的视图在地址栏后面加上/api/Customer/GetCustomerAll 就可以看到数据了 这个是在谷歌浏览器上面看到的结果,不同的浏览器有不同的效果 有时间自己试试看,API控制器访问主要的就是在端口后面加上/api/控制器/方法名, 后面有参数的接上参数跟mvc一般的控制器我的理解就是就多了api的前缀
7、现在在浏览器里面可以直接调用这个api了 ,接下来在一个项目中Home所对应的Index视图里面我们用前台技术(jQuery getJSON)访问调用一下试试
把引用的布局我倒是删除了,Views文件夹下面的_ViewStart.cshtml 删除了 Index.cshtml里面的的内容也删了
代码在下面 别忘了引用JS
<!DOCTYPE html>
<html lang="en">
<head>
<title>ASP.NET Web API</title>
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("/api/Customer/GetCustomerAll", function (data) {
// console.log(data);
$.each(data, function (key, val) {
$("#batMain").append("<tr><td>" + data[key].ID + "</td><td>" + data[key].Name + "</td><td>" + data[key].Number + "</td><td>" + data[key].Manjor + "</td><td><a class='tabEdit'>编辑</a> <a class='tabDele'>删除</a></td></tr>");
Op();
});
});
$("#btnSave").click(function () {
var id = $("#txtID").val();
var Name = $("#txtName").val();
var Number = $("#txtNumber").val();
var Manjor = $("#txtManjor").val();
var customer = {
ID:id,
Name:Name,
Number:Number,
Manjor:Manjor
}
$.ajax({
type: "post",
url: "/api/Customer/Edit",
// data: { "id": id, "Name": Name, "Number": Number, "Manjor": Manjor },
data: JSON.stringify(customer),
contentType:"application/json",
success: function (data) {
console.log(data);
},
error: function () {
}
});
});
});
function Op() {
var id = "";
var row
var tab = document.getElementById("batMain");
var edit = $(".tabEdit");
var dele = $(".tabDele");
for (var i = 0; i < edit.length; i++) {
edit[i].onclick = function () {
row = this.parentNode.parentNode.rowIndex;
id = $("#batMain tr:eq(" + row + ") td:eq(0)").html();
$("#txtID").val($("#batMain tr:eq(" + row + ") td:eq(0)").html());
$("#txtName").val($("#batMain tr:eq(" + row + ") td:eq(1)").html());
$("#txtNumber").val($("#batMain tr:eq(" + row + ") td:eq(2)").html());
$("#txtManjor").val($("#batMain tr:eq(" + row + ") td:eq(3)").html());
}
}
}
</script>
<style type="text/css">
table{width:100%;}
table tr td{text-align:center; line-height:20px; height:25px; min-width:80px; border:1px solid #d0cfcf;word-wrap:break-word;word-break:break-all;}
a{list-style:none;font-size:12px;font-weight:600; color:#072af7;}
a:hover{cursor:pointer}
.trOne{background:rgb(202, 200, 212); line-height:40px; font-size:14px; font-weight:600;}
</style>
</head>
<body id="body">
<div style="width:90%; margin: 0 auto;">
<h1>学生信息</h1>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="20%"><input type="text" id="txtID" readonly="readonly" /></td>
<td width="20%"><input type="text" id="txtName" /></td>
<td width="20%"><input type="text" id="txtNumber" /></td>
<td width="20%"><input type="text" id="txtManjor" /></td>
<td width="20%"><input type="button" id="btnSave" value="确定" /></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" id="batMain">
<tr class="trOne">
<td width="20%">ID</td>
<td width="20%">姓名</td>
<td width="20%">学号</td>
<td width="20%">专业</td>
<td width="20%">操作</td>
</tr>
</table>
</div>
</body>
</html>
看看效果
这里的编辑删除操作我还没有做完,不过一般的asp.net mvc我里面用的是ajax请求后台 这个不是请求API只是处理一般的增删查改,这里记录一下传值的问题
dada里面可以是// data: { "id": id, "Name": Name, "Number": Number, "Manjor": Manjor },这样的格式 后台获取直接用Request["ID"] 这样子就可以获取了。也可以在方法里面定义对应的参数 ,参数名要跟data里面的一样
也可以传值成一个对象过去 data: JSON.stringify(customer), 这样 后台接收 var stream = HttpContext.Request.InputStream; string JsonStr = new StreamReader(stream).ReadToEnd(); 然后自己解析一下
如果要在请求的API里面传参数我只能传一个ID 其他的还没有研究 要传对象过去的话还要在方法里面加上 ([FromBody] Customer ct)这样
8、在后台通过HttpClient调用API 我做练习的时候是用两个项目 一个运行着 另一个调用这个 现在我弄在一个项目里面 用控制器来请求。新建一个控制器Show右键Index添加视图Index.cshyml
public class ShowController : Controller
{
// GET: Show
public ActionResult Index()
{
//获取端口
string url= Request.Url.ToString();
var httpClient = new HttpClient();
var data= httpClient.GetAsync(url+ "api/Customer/GetCustomerAll").Result.Content.ReadAsStringAsync().Result;//调用API
System.Web.Script.Serialization. JavaScriptSerializer Serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Customer> objs = Serializer.Deserialize<List<Customer>>(data);//Json反序列化成List
// Customer cs = JsonConvert.DeserializeObject<Customer>(cg.ReturnData);
//, JsonRequestBehavior.AllowGet
return View(objs);
}
}
视图
对应的代码
@{
ViewBag.Title = "Index";
}
@using WebApiTest.Models;
@model List<Customer>
<html lang="en">
<head>
<title>调用API</title>
<style type="text/css">
table{width:100%;}
table tr td{text-align:center; line-height:20px; height:25px; min-width:80px; border:1px solid #d0cfcf;word-wrap:break-word;word-break:break-all;}
a{list-style:none;font-size:12px;font-weight:600; color:#072af7;}
a:hover{cursor:pointer}
.trOne{background:rgb(202, 200, 212); line-height:40px; font-size:14px; font-weight:600;}
</style>
</head>
<body id="body">
<br />
<div style="width:90%; margin: 0 auto;">
<table>
<tr class="trOne">
<td width="20%">ID</td>
<td width="20%">姓名</td>
<td width="30%">学号</td>
<td width="30%">专业</td>
</tr>
@{
if(Model.Count>0)
{
foreach(var item in Model)
{
<tr>
<td>@item.ID</td>
<td>@item.Name</td>
<td>@item.Number</td>
<td>@item.Manjor</td>
</tr>
}
}
}
</table>
</div>
</body>
</html>
注意应用using System.Web.Script.Serialization; 没有的话来这里找
修改路由配置指向Show 控制器运行项目 你会看到
9、遇到的问题:
如果这里你要返回一个Json数据 记得添加 return(objs, JsonRequestBehavior.AllowGet) 写成这样 具体什么错我也忘记了 JsonResult也是一样的new 的时候一样的添加后面的
如果在不同的项目中调用还要在配置文件里面加下面的代码 加在<system.webServer>里面 实在写API的项目的配置文件里面
<!--跨域配置-->
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Max-Age" value="30" />
<add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
</customHeaders>
<tpProtocol>
<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>
要是调试的时候出错发现请求的路径会自动的加上一个Home 在api前面记得在api里面类名前面加 [RoutePrefix("Api/Customer")]
10、总结:本来的需求是要调用人家的API数据库记录调用的地址、时间、返回的数据这些,就先弄弄,EF、Linq拉姆达这些后面有时间在弄吧 我弄了一点不是很理解在这里还是个小白,以前都是用原生的Sql语句写的现在都不用了,只能慢慢学了。欢迎有缘看到的朋友指出不足,共同学习!好久没有写博客了,月到十五光明少,人到中年万事休。
NET Web Service接口生成及调用