关于跨域的几种方法

基础名词解释：

　　跨域是基于浏览器对 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跨子域，以及代理

　　参考：关于跨域,以及跨域的几种方式

 

　　

posted @ 2018-06-11 11:37  blackatall  阅读(238)  评论(0)  编辑  收藏  举报