產(chǎn)生跨域問題的原因:
瀏覽器本身的原因,瀏覽器會(huì)對(duì)我們請(qǐng)求進(jìn)行安全檢查,對(duì)于域名不同,甚至域名相同但端口號(hào)不同的請(qǐng)求進(jìn)行攔截。(瀏覽器的同源策略)
解決方法:
改變?yōu)g覽器檢查策略
改變請(qǐng)求類型(jsonp)
-
解決跨域(nignx)
1. 改變?yōu)g覽器檢查策略
我們可以在控制臺(tái)打開瀏覽器的時(shí)候,增加配置項(xiàng),使得瀏覽器忽略請(qǐng)求的安全檢查。
這種方式什么不建議,因?yàn)椴磺袑?shí)際,難道我們讓我們的客戶每次打開瀏覽器之前,先自己配置一番?具體方式大家可以網(wǎng)上去搜,我就不具體介紹了,只是告訴大家有這么一個(gè)辦法。
2. 改變請(qǐng)求
什么意思?
原因:覽器的安全檢查只是針對(duì)type為xhr請(qǐng)求的檢查。
解決:那么我們改變請(qǐng)求的類型不就可以了?
方法:我們可以將請(qǐng)求的類型改變?yōu)閟cript腳本,這樣瀏覽器就可以忽略對(duì)于請(qǐng)求的檢查。
弊端:前端后代碼都需要進(jìn)行改變。
前端:
$.ajax({ type: "GET", url: baseUrl + '/getName' dataType: "jsonp", //jsonp: "callback" });其中:
我們需要指定dataType為jsonp類型。jsonp:'callback'這條是默認(rèn)的,除非我們需要改變callback的名字,callback名字需要前后端一致。
后端:
// 這段是我從網(wǎng)上找過來的,小編是做的前端。大家自行甄別。 public void GetSingleInfo(string strCparent) { string ret = string.Empty; HttpContext.Current.Response.ContentType = "application/json;charset=utf-8"; string jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString(); //string jsonCallBackFunName1 = HttpContext.Current.Request.QueryString["callback"].Trim(); //上面代碼必須 //中間代碼執(zhí)行自己的業(yè)務(wù)操作,可返回自己的任意信息(多數(shù)據(jù)類型) BLL.equipment eq_bll = new BLL.equipment(); List<Model.equipment> equipmentList = new List<Model.equipment>(); equipmentList = eq_bll.GetModelEquimentList(strCparent); ret = JsonConvert.SerializeObject(equipmentList); //下面代碼必須 HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, ret)); HttpContext.Current.Response.End(); }
3. 解決跨域(最常用的方法,也是最推薦的方法)
在config/index文件中進(jìn)行設(shè)置。
proxyTable: {
'/api':{
target: ' https://www.easy-mock.com/mock/5ce21e664c00c8147dcee502',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
其中,
將/api地址映射為target地址,并將api重寫為空字符串。
注:在服務(wù)器端也要進(jìn)行類似的映射。