怎么解決ASP.NET開發(fā)web應用遇到的javascript跨域請求問題

本篇內(nèi)容介紹了“怎么解決ASP.NET開發(fā)web應用遇到的javascript跨域請求問題”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)奉新,十年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):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>     /// Summary description for Get     /// </summary>     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，它會自動轉(zhuǎn)換為GET請求，把你的data放在querystring中。

1.修改web.config文件

整個應用都支持跨域的請求。

web.config

<system.webServer>    <httpProtocol>     <customHeaders>       <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>       <add name="Access-Control-Allow-Headers" value="x-requested-with"/>       <add name="Access-Control-Allow-Origin" value="*" />     </customHeaders>   </httpProtocol> </system.webServer>

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(); }            });        }
 這種方式不能設(shè)置contentType: "application/json"，否則會提示"Request header field Content-Type is not allowed by Access-Control-Allow-Headers."去掉ajax中的contentType設(shè)置就可以了！  想要設(shè)置contentType也可以，需要將web.config文件中的<add name="Access-Control-Allow-Headers" value="x-requested-with"/> 修改為<add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>

 在II6中web.config不支持system.webServer配置節(jié)，所以需要在IIS中設(shè)置httprequestheader。將web.config文件中的自定義頭加入IIS的設(shè)置中。

怎么解決ASP.NET開發(fā)web應用遇到的javascript跨域請求問題

FindContact.ashx

  1. /// <summary> 
  2.    /// Summary description for FindContact 
  3.    /// </summary> 
  4.    public class FindContact : IHttpHandler 
  5.    { 
  6.  
  7.        public void Proce***equest(HttpContext context) 
  8.        { 
  9.            context.Response.ContentEncoding = Encoding.UTF8; 
  10.            context.Response.ContentType = "application/json"; 
  11.  
  12.            var stream = context.Request.InputStream; 
  13.            var reader = new StreamReader(stream); 
  14.            var input=reader.ReadToEnd(); 
  15.  
  16.            var o = Newtonsoft.Json.JsonConvert.DeserializeObject<Models.Contact>(input); 
  17.            var list = new List<Models.Contact>(); 
  18.            list.Add(o); 
  19.            list.Add(o); 
  20.            context.Response.Write(Newtonsoft.Json.JsonConvert .SerializeObject ( list )); 
  21.        } 
  22.  
  23.        public bool IsReusable 
  24.        { 
  25.            get 
  26.            { 
  27.                return false; 
  28.            } 
  29.        } 
  30.    } 
 
2.在請求中設(shè)置HttpHeader
針對單個請求。
FindContact.ashx
/// <summary>    /// Summary description for FindContact    /// </summary>    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<Models.Contact>(input);            var list = new List<Models.Contact>();            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.使用代理
假設(shè)你有兩個web應用：一個應用放html頁面，給用戶提供界面；一個應用放服務(wù)，使用.ASHX處理請求。
你在html應用中使用ajax請求ashx應用的接口，就是ajax跨域請求。
你可以在html應用中寫一些后臺代碼，在代碼中向ashx應用提交數(shù)據(jù)。
然后你的html應用的頁面中將收集到的數(shù)據(jù)發(fā)送到html應用的后臺代碼中，由后臺代碼發(fā)送數(shù)據(jù)到ashx應用，這就不是ajax跨域請求了。
在html應用中的后臺代碼就被叫做“代理”，代理html應用到ashx應用的請求。

“怎么解決ASP.NET開發(fā)web應用遇到的javascript跨域請求問題”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

分享名稱：怎么解決ASP.NET開發(fā)web應用遇到的javascript跨域請求問題
分享路徑：http://muchs.cn/article46/pischg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、標簽優(yōu)化、軟件開發(fā)、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)