关于跨域的几种方法
基础名词解释:
跨域是基于浏览器对 javascript 同源策略的限制的解决之法。
关于同源,即协议,域名及端口需一致。
跨域方法:
1.jsonp,一种双方约定的信息传递的方法。
我们知道,通常在调用 js 文件(<script src="">),图片(<img src="">)或框架(<iframe>)的时候不受跨域的影响,因此可以将需要 res 的数据装进 server 的 js 文件内,用以 client req。
该协议的要点就是允许用户传递一个 callback 参数给服务器。
2.服务端代理&配置 CORS
请求头 Access-Control-Allow-Origin 设置 "*" 或指定IP / Access-Control-Allow-Methods(GET, POST, PUT, DELETE,OPTIONS)
nginx&apache.etc
演示:
1.jsonp,注意调用的顺序,实际项目需动态创建。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id='testdiv'></div> <script type="text/javascript"> var message = function(data) { //window['message'] = fn; 避免 message/jsonpCallback 未定义 alert(data[1].title); }; var url = "https://files.cnblogs.com/files/yuqlblog/cross-domain.js"; //https://files.cnblogs.com/demo.html?callback=message var script = document.createElement('script'); script.setAttribute('src',url); document.getElementsByTagName('body')[0].appendChild(script); </script> </body> </html>
1.1. jsonp 基于 jquery 的跨域,只能是 get 请求(jsonp 的局限:get,安全风险)。
jsonp:传递给请求处理程序或页面的,用以获得 jsonp 回调函数名的参数名,默认为 callback
jsonpCallback:自定义的 jsonp 回调函数名称,默认为 jQuery 自动生成的随机函数名,指定 jsonpCallback 时可以将回调函数写在 ajax 外面做其他操作。
正常返回数据:
{ "success": [{ "id": 1, "title": "title 1" }, { "id": 2, "title": "title 2" }, { "id": 3, "title": "title 3"}] }
e.g.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var name = 'chenshishuo'; var sex = 'man'; var address = 'shenzhen'; var looks = 'handsome '; $.ajax({ type : 'get', url:'http://192.168.31.137/train/test/testjsonp', data : { name : name, sex : sex, address : address, looks : looks, }, cache :false, jsonp: "callback", // GET&POST 请求中 URL 参数里的 "callback=?",可改 jsonpCallback:"success", dataType : 'jsonp', success:function(data){ alert(data); }, error:function(data){ alert('error'); } }); }); </script> </head> <body> <input id='inputtest' value='546' name='inputtest'> <div id='testdiv'></div> </body> </html>
在使用默认 jsonp 名称,即 callback,和默认随机回调函数名时,服务器需要这样返回数据示例:
Response.ContentType="text/html; charset=utf-8"; String callback = Request.QueryString["callback"].ToString(); Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");
2.iframe跨子域,以及代理