最近因项目需要,需要跨域请求访问数据。跨域访问是指什么?
[跨域]:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对Javascript施加的安全限制。所谓同域是指,域名,协议,端口均相同,不明白没关系,举个栗子:例如,我的电脑上有2个服务器 192.168.0.11和192.168.0.12。如果第一个服务器上的页面要访问第二个服务器上面的数据,就叫做跨域。或者 要访问也是不同域名也是跨域。 下面给出完整请求案例:
前端页面请求代码片:
<script type="text/javascript"> function ajaxsubmit(name,phone) { $.ajax({ type: "get", url: ":35709/AppInterface/ResourceInsert.ashx", data: { "share_name": encodeURI(name), "telphone": encodeURI(phone), "fromtype": 4 }, dataType : "jsonp", jsonp: "callback", jsonpCallback: "successcallback", success: function (json) { alert(json.msg); }, error:function(e){ alert("提交失败!请稍后再试"); } }); } </script>
一般处理程序代码片:
public class ResourceInsert : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType="application/json"; context.Response.ContentEncoding=System.Text.Encoding.UTF8; cms.Model.Resource model=new Model.Resource(); cms.BLL.Resource bll=new BLL.Resource(); //你所需要进行的操作 model.share_name=HttpUtility.UrlDecode(context.Request["share_name"]); model.ask_telphone=HttpUtility.UrlDecode(context.Request["telphone"]); model.back_row_one=context.Request["fromtype"]; ConvertHelper ch=new ConvertHelper(); model.share_name=ch.RemoveSpecialChar(model.share_name); //successcallback为跨域请求回调函数,切记必不可少。获取方式也可以为context.Request["callback"], //对应前端页面发起请求的jsonp和jsonpCallback格式为:jsonp_value=jsonpCallback_value if (bll.Exists(model.share_name, model.ask_telphone)) { Message temp=new Message(1, "我们已收到您的请求额!请勿重复提交!", null); context.Response.Write("successcallback" + "(" + JsonConvert.SerializeObject(temp) + ")"); context.Response.End(); return; } else { if (bll.Add(model) > 0) { Message temp=new Message(1, "提交成功,我们工作人员会尽快回复你!感谢关注!", null); context.Response.Write("successcallback" + "(" + JsonConvert.SerializeObject(temp) + ")"); context.Response.End(); return; } else { Message temp=new Message(0, "请确认信息填写无误!", null); context.Response.Write("successcallback" + "(" + JsonConvert.SerializeObject(temp) + ")"); context.Response.End(); return; } } } public bool IsReusable { get { return false; } } }
你以为到这里完了吗?当然没有/斜眼笑。配置文件中当然不能少,web.config文件中的 system.webServer 节点下 增加如下配置:
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/> <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer>