怎么解决ASP.NET开发web应用遇到的javascript跨域请求问题
本篇内容介绍了“怎么解决ASP.NET开发web应用遇到的javascript跨域请求问题”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联公司主要从事成都网站建设、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务奉新,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
解决方案
不提倡跨域的post请求。
0.jquery中ajax的跨域方案jsonp
.ashx代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace KB.DSN.Web.API.Tokens { ////// Summary description for Get /// public class Get : IHttpHandler { public void Proce***equest(HttpContext context) { setresponsecontext(context); var token = KB.DSN.BusinessAccess.UniqueCommunicationCode.GenerateUniqueCommunicationCode(); var outputobject = new { Head = new Models.KBJsonHeadResponse(), Body = new { Token = token } }; var outputjsonstring = Newtonsoft.Json.JsonConvert.SerializeObject(outputobject); context.Response.Write(context.Request.QueryString["callback"]+"("+outputjsonstring+")"); } private void setresponsecontext(HttpContext context) { context.Response.ContentEncoding = System.Text.Encoding.UTF8; context.Response.ContentType = "application/json"; } public bool IsReusable { get { return false; } } } }
html页面
function getToken_jsonp(){ $.ajax({ url: "http://192.168.0.111/api/tokens/get.ashx", type: "get", dataType: "jsonp", jsonp: "callback", async: false, contentType: "application/json", success: function(data){ //alert("getToken success"); $("#token").text($.toJSON(data)); //console.log(data); }, error:function(){ alert("getToken fail"); } }); }
jsonp只支持GET请求,不支持POST请求,就算你写了POST,它会自动转换为GET请求,把你的data放在querystring中。
1.修改web.config文件
整个应用都支持跨域的请求。
web.config
html page
function addContact() { var contact = new Object(); contact.FirstName = $("#firstName").attr("value"); contact.LastName = $("#lastName").attr("value"); contact.PhoneNo = $("#phoneNo").attr("value"); contact.EmailAddress = $("#emailAddress").attr("value"); $.ajax({ url: "http://localhost:10401/api/contacts/AddContact.ashx", type: "POST", dataType: "json", data: $.toJSON(contact), success: function () { loadAllContacts(); } }); }
这种方式不能设置contentType: "application/json",否则会提示"Request header field Content-Type is not allowed by Access-Control-Allow-Headers."去掉ajax中的contentType设置就可以了! 想要设置contentType也可以,需要将web.config文件中的修改为
在II6中web.config不支持system.webServer配置节,所以需要在IIS中设置httprequestheader。将web.config文件中的自定义头加入IIS的设置中。 |
FindContact.ashx
///
/// Summary description for FindContact
///
public class FindContact : IHttpHandler
{
public void Proce***equest(HttpContext context)
{
context.Response.ContentEncoding = Encoding.UTF8;
context.Response.ContentType = "application/json";
var stream = context.Request.InputStream;
var reader = new StreamReader(stream);
var input=reader.ReadToEnd();
var o = Newtonsoft.Json.JsonConvert.DeserializeObject
(input); var list = new List
(); list.Add(o);
list.Add(o);
context.Response.Write(Newtonsoft.Json.JsonConvert .SerializeObject ( list ));
}
public bool IsReusable
{
get
{
return false;
}
}
}
2.在请求中设置HttpHeader
针对单个请求。
FindContact.ashx
////// Summary description for FindContact /// public class FindContact : IHttpHandler { public void Proce***equest(HttpContext context) { context.Response.ContentEncoding = Encoding.UTF8; context.Response.ContentType = "application/json"; var stream = context.Request.InputStream; var reader = new StreamReader(stream); var input=reader.ReadToEnd(); var o = Newtonsoft.Json.JsonConvert.DeserializeObject(input); var list = new List (); list.Add(o); list.Add(o); #region 支持跨域请求 context.Response.ClearHeaders(); string origin = context.Request.Headers["Origin"]; context.Response.AppendHeader("Access-Control-Allow-Origin", string.IsNullOrEmpty(origin) ? "*" : origin); string requestHeaders = context.Request.Headers["Access-Control-Request-Headers"]; context.Response.AppendHeader("Access-Control-Allow-Headers", string.IsNullOrEmpty(requestHeaders) ? "*" : requestHeaders); context.Response.AppendHeader("Access-Control-Allow-Methods", "POST, OPTIONS"); #endregion context.Response.Write(Newtonsoft.Json.JsonConvert .SerializeObject ( list )); } public bool IsReusable { get { return false; } } } html page
function addContact() { var contact = new Object(); contact.FirstName = $("#firstName").attr("value"); contact.LastName = $("#lastName").attr("value"); contact.PhoneNo = $("#phoneNo").attr("value"); contact.EmailAddress = $("#emailAddress").attr("value"); $.ajax({ url: "http://localhost:10401/api/contacts/AddContact.ashx", type: "POST", dataType: "json", data: $.toJSON(contact), success: function () { loadAllContacts(); } }); }3.使用代理
假设你有两个web应用:一个应用放html页面,给用户提供界面;一个应用放服务,使用.ASHX处理请求。
你在html应用中使用ajax请求ashx应用的接口,就是ajax跨域请求。
你可以在html应用中写一些后台代码,在代码中向ashx应用提交数据。
然后你的html应用的页面中将收集到的数据发送到html应用的后台代码中,由后台代码发送数据到ashx应用,这就不是ajax跨域请求了。
在html应用中的后台代码就被叫做“代理”,代理html应用到ashx应用的请求。
“怎么解决ASP.NET开发web应用遇到的javascript跨域请求问题”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
分享题目:怎么解决ASP.NET开发web应用遇到的javascript跨域请求问题
网站路径:http://myzitong.com/article/pischg.html