产生跨域问题的原因:
浏览器本身的原因,浏览器会对我们请求进行安全检查,对于域名不同,甚至域名相同但端口号不同的请求进行拦截。(浏览器的同源策略)
解决方法:
改变浏览器检查策略
改变请求类型(jsonp)
-
解决跨域(nignx)
1. 改变浏览器检查策略
我们可以在控制台打开浏览器的时候,增加配置项,使得浏览器忽略请求的安全检查。
这种方式什么不建议,因为不切实际,难道我们让我们的客户每次打开浏览器之前,先自己配置一番?具体方式大家可以网上去搜,我就不具体介绍了,只是告诉大家有这么一个办法。
2. 改变请求
什么意思?
原因:览器的安全检查只是针对type为xhr请求的检查。
解决:那么我们改变请求的类型不就可以了?
方法:我们可以将请求的类型改变为script脚本,这样浏览器就可以忽略对于请求的检查。
弊端:前端后代码都需要进行改变。
前端:
$.ajax({ type: "GET", url: baseUrl + '/getName' dataType: "jsonp", //jsonp: "callback" });
其中:
我们需要指定dataType为jsonp类型。jsonp:'callback'这条是默认的,除非我们需要改变callback的名字,callback名字需要前后端一致。
后端:
// 这段是我从网上找过来的,小编是做的前端。大家自行甄别。 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(); //上面代码必须 //中间代码执行自己的业务操作,可返回自己的任意信息(多数据类型) 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文件中进行设置。
proxyTable: {
'/api':{
target: ' https://www.easy-mock.com/mock/5ce21e664c00c8147dcee502',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
其中,
将/api地址映射为target地址,并将api重写为空字符串。
注:在服务器端也要进行类似的映射。