ASP.NET网站中实现Ajax的跨域请求
Posted 颉旺飞
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ASP.NET网站中实现Ajax的跨域请求相关的知识,希望对你有一定的参考价值。
什么是同源策略
同源策略是浏览器的一个安全功能,不同源(同源是指协议、端口和域名完全相同)的客户端脚本在没有明确授权的情况下不能读写对方资源。只要网站的协议名(Protocol)、主机名(Host)、端口名(Port)这三个中任意一个不同,网站之间的资源请求就会受到同源策略的限制
什么是跨域请求
凡是不符合同源策略的请求,都属于跨域请求。为了保证安全性,通常浏览器会对跨域请求作出限制。
通常情况下限制以下几种行为:
1).Cookie、LocalStorage 和 IndexDB 无法读取
2).DOM 和JS对象无法获得
3).AJAX请求不能发送
常见跨域场景
URL 说明 是否允许通信
http://www.domain.com/a.js http://www.domain.com/b.js 同一域名,不同文件或路径 允许 http://www.domain.com/lab/c.js http://www.domain.com:8000/a.js http://www.domain.com/b.js 同一域名,不同端口 不允许 http://www.domain.com/a.js https://www.domain.com/b.js 同一域名,不同协议 不允许 http://www.domain.com/a.js http://192.168.4.12/b.js 域名和域名对应相同ip 不允许 http://www.domain.com/a.js http://x.domain.com/b.js 主域相同,子域不同 不允许 http://domain.com/c.js http://www.domain1.com/a.js http://www.domain2.com/b.js 不同域名 不允许
跨域请求的方法
1)JSONP
通常情况下我们在使用Ajax请求时,会使用JSON格式的字符串进行信息的传递,JSON和JSONP是完全不同的内容,在JSONP的字符串中,通常比JSON格式的字符串多了一个CallBack的函数名。
JSON格式
{ "code":"1991", "price":1991, "tickets":5 };
JSONP格式
flightHandler( { "code":"1991", "price":1991, "tickets":5 }
);
一般情况系我们不用制定Callback函数的名称,系统会自动生成一个长字符串作为该Callback的唯一标识。
要解决跨域问题,在ASP.NET服务器端,我们通常使用一般处理文件来对请求进行响应,如下所示:
public class ServerResponseHandler : IHttpHandler { List<MyDataTest> myDataTestList; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //该行函数必须是在JSONP类型的请求中才不会报错,通过获取系统自动生成的callBack字符串来标识当前请求。 string callback = context.Request.Params["callBack"].TrimEnd().ToString(); myDataTestList = new List<MyDataTest> { new MyDataTest { name = "数据1", type = "类型1", state = "状态1", }, new MyDataTest { name = "数据2", type = "类型2", state = "状态2", }, }; string json = Newtonsoft.Json.JsonConvert.SerializeObject(myDataTestList); json = callback + "(" + json + ")"; context.Response.Write(json); } public bool IsReusable { get { return false; } } } public class MyDataTest { public string name; public string type; public string state; }
在客户端的前端通过Ajax进行请求
<script src="Scripts/jquery-3.3.1.js" type="text/javascript"></script> <script> function GetJson() { $.ajax({ url: "http://localhost:55222/ServerResponseHandler.ashx", dataType: "jsonp", //这里不需要制定JSONP的CallBack函数名,通过系统自动生成并加入到URL请求中来完成。 success: function (data) { alert(data[0].name);//这里data通常已经转化为JSON字符串所指向的类实例,可以通过类的方式直接获取相关值。 alert(JSON.stringify(data)); //也可以通过该行代码将对象实例再次转化为JSON供其他部分使用。 } }); } </script>
相关源码下载地址
JSONP只支持GET请求,不支持POST请求。
2)跨域资源共享(CORS)
跨域资源共享(Cross-Origin Resource Sharing)定义了一重跨域访问的机制,可以让Ajax实现跨域问题,该功能的实现只需服务器发送一个响应标头即可。
Access-Control-Request-Method
Access-Control-Request-Headers
以上是关于ASP.NET网站中实现Ajax的跨域请求的主要内容,如果未能解决你的问题,请参考以下文章
jQuery+ASP.NET MVC基于CORS实现带cookie的跨域ajax请求
ASP.NET MVC & WebApi 中实现Cors来让Ajax可以跨域访问 (转载)
Asp.NET Core:对服务的跨域请求(预检)返回代码 204 而不是 200
asp.net signalr core 中的跨域请求不起作用?
基于.Net Framework 4.0 Web API开发:ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)