关于跨域的几种方法

基础名词解释:

  跨域是基于浏览器对 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  阅读(240)  评论(0编辑  收藏  举报