Ajax跨域的解决方案

雨点打透心脏的1/2处 2022-05-20 01:39 379阅读 0赞

什么是ajax跨域,ajax跨域在前后端分离的项目中经常出现,因为前后端分别处于不同的服务器或域名或端口之下。

跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题,比如a标签、script标签、甚至form标签(可以直接跨域发送数据并接收数据)等 。

解决方案:
1、使用jsonp

前端代码 定义

  1. <script type="text/javascript" src="../js/jquery.min.js"></script>
  2. <script type="text/javascript"> $(function () { alert("hello"); $.ajax({ type: "GET", dataType:"jsonp", 数据类型配置成jsonp url: "http://127.0.0.1:8083/test", jsonp:'mytest',//配置jsonp随机码标签,在服务器代码部分需要用到他来拼接一个json的js对象 用来返回后台的数据 这里没有分配mytest的值 会自动产生一个值 success: function(result) { alert(result); }, error : function (){ alert('服务器异常!'); } }); }); </script>

后台:

  1. @GetMapping("/test")
  2. public String test1(String mytest){
  3. //mytest即是生成的jsonp随机码标签 用来返回数据
  4. System.out.println(mytest);
  5. // 接收参数callback名称需要与js中配置的jsonp标签名一致
  6. //返回的数据用JSONObejct方法返回json合适
  7. String result=mytest+"("+JSONObject.toJSONString("tom")+")";
  8. return result;
  9. }

结果输出:jQuery111106296209816560836_1531202412945

注意:
1 jsonp不能处理只能是get方法,不顾和rest风格PAI
2 JSONP的实现需要服务器配合,如果是访问的是第三方的服务器,我们没有修改服务器的权限,那么这种方式是不可行的

2、在服务端设置response header中Access-Control-Allow-Origin字段

  1. 前端代码:
  2. <script type="text/javascript" src="../js/jquery.min.js"></script>
  3. <script type="text/javascript"> $(function () { alert("hello"); $.ajax({ type: "GET", url: "http://127.0.0.1:8083/test", success: function(result) { alert(result); }, error : function (){ alert('服务器异常!'); } }); }); </script>
  4. 后台代码:
  5. protected HttpServletResponse response;
  6. @ModelAttribute
  7. public void setReqAndRes(HttpServletRequest request, HttpServletResponse response) {
  8. this.response = response;
  9. /*设置允许跨域的响应头*/
  10. response.setHeader("Access-Control-Allow-Origin", "*");
  11. }
  12. @GetMapping("/test")
  13. public String test1(){
  14. return "tom";
  15. }

发表评论

表情:
评论列表 (有 0 条评论,379人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Ajax终极解决方案

    大家在做Ajax请求时,往往因为安全性以及浏览器问题,浏览器会对ajax的功能进行限制:即不能做到跨域请求数据。 那么,我们怎么才能做到请求外域的数据呢? 下面我提供下面几

    相关 ajax解决方案

    正确面对跨域,别慌 > 前端开发中,跨域使我们经常遇到的一个问题,也是面试中经常被问到的一些问题,所以,这里,我们做个总结。小小问题,不足担心 原文地址:[YOU-SH

    相关 ajax解决全面方案

    前言 从刚接触前端开发起,`跨域`这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么