博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js跨域
阅读量:6509 次
发布时间:2019-06-24

本文共 2678 字,大约阅读时间需要 8 分钟。

 

一、域

  何为域? 这里说到的域指的是:协议+端口+网路域名。

  例如:在 本地的HTML文件 :   file:///H:/ZLT/javascript/js%E8%B7%A8%E5%9F%9F/js%E8%B7%A8%E5%9F%9F_01.html

     中请求 localhost:8080/web/a.do中的数据 就算是跨域,因为他们的网络协议就不同。

     值得注意的是 即使是相同的的域名,但是对应的是不同的ip地址也算是跨域。

二、同源策略

  js网络(ajax)请求,请求都是设置了同源策略的,就是通过ajax获取网络数据,默认情况下是不允许跨域请求数据的。

  这是为了防止 CSRF攻击  参看博文:http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html

  同源策略对应表:

  

 

三、跨域问题的解决

  1)通过非同源策略的标签获取

    在HTML<img> 可以请求其他网站的图片地址,这样子的标签就属于是非同源策略的标签。同样<script>标签也是非同源策略的标签

    所以我们可以在本地的html文件中 这样写:

      

    然后再通过自己的js代码,去调用非同源js文件中的方法。这种方法我们是不是在引用网络的版的jquery的时候用到过?

      2) 通过ajax(jquery)获取   ① 通过$.post()/$.get()方法     前端js代码
$.post("http://localhost:8080/CrossDomain/json.do",function(data){                  alert(data.name);              },"json");//服务器设置请求头

    java后台代码

@Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        resp.setHeader("Access-Control-Allow-Origin", "*");        String result = "{\"name\":\"zhangsan\",\"date\":\"2017-10-20\"}";                resp.setContentType("text/plusin;charset=utf-8");        resp.setCharacterEncoding("UTF-8");                resp.getWriter().write(result);    }

  *值得注意的是,这种求情方式必须在后端 设置允许跨域访问的响应头resp.setHeader("Access-Control-Allow-Origin", "*"); 其中 * 代表所有域

  ,亦可以自己指明允许跨域的链接

  3) 通过ajax——jsonp来完成

    jsonp:一种特殊的跨域的数据格式  形似json。格式为:字符(json); 例如: m({"user":"张三","age":23});

    前端代码

function  ajax_jsonp(){              $.ajax({                                       url:"http://localhost:8080/CrossDomain/json2.do",                  type:"GET",                  success:function(data){                   alert(data.name);                },                dataType:"jsonp",                jsonpCallback:"m1",                error:function(e){                    alert("error");                }            });

  从代码中我们可以看出,跨域访问的返回数据为jsonp类型,并且比一般的ajax多了一个 jsonpCallback的字段。很多人都说,jsonCallback所携带的“m1”是一个要回调的方法

  其实不是,上面提到了jsonp的数据格式,其实这个“m1”就是 jsonp格式里面的那个 字符 。也就是说服务器现在必须给你返回的数据格式,必须是 m1(json)。例如:       

  m1({"user":"张三","age":23}); 否则请求就是失败的。 当然你获取到数据依然是一个 json 格式的数据 ,它不包含其他多余的部分。

  

  后端代码

@Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {                resp.setContentType("text/plusin;charset=utf-8");        resp.setCharacterEncoding("UTF-8");         String result = "{\"name\":\"zhangsan\",\"date\":\"2017-10-20\"}";         resp.getWriter().write("m1(" + result + ")");
}

  通过后台的代码可以看出,通过jsonp跨域访问是不需要设置允许跨域的响应头的。    

  通过测试发现,ajax使用jsonp访问跨域资源,无论ajax的type为 post还是get,跨域访问都只访问后台的 doget()方法  

 

转载于:https://www.cnblogs.com/getchen/p/7704732.html

你可能感兴趣的文章
Zabbix使用SMTP发送邮件报警及定制邮件报警内容
查看>>
SCOM 2012 SP1服务器上安装和配置Veeam MP for VMware
查看>>
UDP中转服务器
查看>>
多核编程的四层境界
查看>>
Windows Phone 实用开发技巧(11):让StackPanel中的控件靠右对齐
查看>>
小记如何修改xen模块
查看>>
centos访问windowsxp共享资源指南.
查看>>
实时游戏对战引擎Photon
查看>>
C语言位操作控件属性
查看>>
nginx的安装及基本配置,及多个域名服务
查看>>
Servlet访问postgresql数据库并提取数据显示在前端jsp页面
查看>>
不改一行代码定位线上性能问题
查看>>
定义运算符
查看>>
git管理
查看>>
idea演示
查看>>
Android第三十天
查看>>
告别暗黄皮肤变水嫩皮肤的8个小习惯
查看>>
加强Eclipse代码自动提示的方法
查看>>
【HM】第4课:MySQL入门
查看>>
GNS3-地址重叠环境中部署IPsec
查看>>