开发者社区> 琴瑟> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

跨域访问-ajax

简介:
+关注继续查看

ajax跨域访问方案分为jsonp和cors,本文将会对两种方案进行介绍。

jsonp

jsonp的原理是利用html文档script标签可以跨域访问的特点,通过在HTML文档中动态添加script标签,从其它域获取数据并在原HTML文档中回调处理数据。下面利用jquery封装好的jsonp,跨域获取数据。

清单:www.a.com的html文档

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX Tester</title>
    <script type="text/javascript" src="js/jquery.js"></script>


    <script type="text/javascript">
        $(function () {
            // jsonp形式的请求
            $.ajax({
                url: "http://www.b.com/user_info?callback=?",
                data: {id: 1},
                dataType: "jsonp"
            }).done(showResult);
        });

        function showResult(ret) {
            console.log(ret);
            $("#container").html(ret.name);
        }
    </script>

</head>
<body>
My name is:
<span style="font-weight:bold;" id="container"></span>

<script type="text/javascript">

</script>

</body>
</html>

代码中,采用ajax jsonp的方式请求www.b.com域名获取数据,并显示在页面中。 JSONP默认采取get方式请求数据。

清单:www.b.com的API

@WebServlet("/user_info")
public class GetUserInfoServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {
        // 要正确设置响应类型,避免IE出现下载
        response.setContentType("application/javascript");

        String userInfo = "{\"id\":1, \"name\":\"zhangsan\"}";

        String ret;

        // 通过参数传递回调函数名,一定程度降低了前后端代码的耦合度
        String callback = request.getParameter("callback");
        if (callback != null && !callback.isEmpty()) {
            ret = callback + "(" + userInfo + ")"; //拼接jsonp字符串
        } else {
            ret = userInfo; //正常返回json数据
        }

        response.getWriter().write(ret);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

JSONP的返回数据的格式是 callback_method(json_data) ,这里的callback_method对应于原html文档中存在的一个函数的函数名。

缺点: jsonp采用的是get方法请求数据,当数据量很大的时候,不能解决跨域请求数据的问题。

CORS

CORS,全称跨域资源共享(Cross-Origin Resource Sharing)。CORS 是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。

既然CORS是一种规范,那么必须需要浏览器实现这种规范,这就不可避免出现浏览器兼容的问题。我们看一下各浏览器对CORS的支持


image
image

CORS请求又分为简单请求和非简单请求。简单请求是指通过GET方式获取资源;非简单请求是指 如POST、PUT、DELETE类型请求,或者在请求中有其它自定义的HTTP Header。下面详细介绍一下对于不同的请求的实现方法。

简单请求

response中需要添加Access-Control-Allow-Origin头,告诉浏览器哪些域名的网站可以获取返回的数据

response.addHeader("Access-Control-Allow-Origin", "*"); //可以跨域访问的域名

清单:www.a.com的html文档获取www.b.com的数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX Tester</title>
    <script type="text/javascript" src="js/jquery.js"></script>


    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: "http://www.b.com/user_info_2",
                method: "GET"
            }).done(showResult);

        });

        function showResult(ret) {
            $("#container").html(ret.name);
        }
    </script>

</head>
<body>
My name is:
<span style="font-weight:bold;" id="container"></span>

</body>
</html>

清单:www.b.com通过cors方式返回数据给www.a.com

@WebServlet("/user_info_2")
public class GetUserInfoServlet2 extends HttpServlet {
    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {
        // 简单请求,直接设置Access-Control-Allow-Origin就可以了
        response.addHeader("Access-Control-Allow-Origin", "*"); //可以跨域访问的域名

        // 要正确设置响应类型,避免IE出现下载
        response.setContentType("application/json");

        response.getWriter().write("{\"id\":1, \"name\":\"zhangsan\"}");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

非简单请求

对于非简单请求,会执行一次preflight操作,浏览器会发起一次OPTIONS类型请求,要对OPTIONS请求给予正确应答,应答内容是允许谁访问,允许什么方法,允许什么自定义头的request。下面看一下一次request请求的CORS流程。


image


打开调试模式后,可以看到一次request请求被分成了两次:
第一个请求是用OPTIONS方法。 //这里所做是的是预检查,从服务器确认是否可以继续
第二个请求才是你发起的请求方法。

清单:www.a.com的html文档,对www.b.com发起ajax请求数据,并携带了自定义 HEADER和采用POST方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX Tester</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
            $.ajax({
                url: "http://www.b.com/user_info_2",
                method: "POST",
                beforeSend: function (xhr) {
                    //添加自定义头
                    console.log("before send");
                    xhr.setRequestHeader("myheader", "abc")
                }
            }).done(showResult);

        });

        function showResult(ret) {
            $("#container").html(ret.name);
        }
    </script>

</head>
<body>
My name is:
<span style="font-weight:bold;" id="container"></span>

</body>
</html>

清单:www.b.com的API在option的处理中,对response添加了一些头。

@WebServlet("/user_info_2")
public class GetUserInfoServlet2 extends HttpServlet {
    @Override
    protected void doOptions(HttpServletRequest request,
                             HttpServletResponse response) throws ServletException, IOException {
        System.out.println("OPTIONS");
        response.addHeader("Access-Control-Allow-Origin", "*");

        response.addHeader("Access-Control-Allow-Methods",
                "GET, POST, OPTIONS, DELETE");
        response.addHeader("Access-Control-Allow-Headers", "myheader, myheader2");
    }

    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {

        // 要正确设置响应类型,避免IE出现下载
        response.setContentType("application/json");

        response.getWriter().write("{\"id\":1, \"name\":\"zhangsan\"}");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

大家可以看到利用CORS方案处理ajax跨域请求的问题,但是比较麻烦的是需要修改java代码,侵入性很强。为了解决这个问题,我们可以在nginx中配置,让response返回的时候自动添加返回头。

niginx的配置如下:

  if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
             }
             if ($request_method = 'POST') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
             }
             if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
             }

原文链接

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Ajax跨域解决方案
讲述跨域原因以及从原理上讲述两种解决方案:jsonp,options
4523 0
ajax 跨域----好用的解决方案
一、前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下。个人见识有限,如有差错,请多多见谅 二、前言 关于跨域,有N种类型,本文只专注于 ajax请求跨域(ajax跨域只是属于浏览器"同源...
1342 0
ajax跨域和js跨域解决方案 .
  ajax跨域和JS的跨域通信(Cross The Site)的几种解决方案     最近做的一个项目中需要ajax跨域取得数据,如果是在本域中确实没有问题,但是放到二级域和其他域下浏览器直接就弹出提示框:“该页正在 1.什么引起了ajax跨域不能的问题 ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告。
938 0
JQuery 的 Ajax 请求(重点****)
JQuery 的 Ajax 请求(重点****)
0 0
spring boot jquery ajax ie8解决跨域
spring boot jquery ajax ie8解决跨域
0 0
jquery ajax 和servlet json 结合的简单小例子
jquery ajax 和servlet json 结合的简单小例子
0 0
jQuery封装Ajax,SpringMVC使用Ajax的配置
jQuery封装Ajax,SpringMVC使用Ajax的配置
0 0
JQuery Ajax实现三级联动
本文实例为大家分享了ajax实现三级联动的具体代码
0 0
+关注
琴瑟
TA有点害羞,没有介绍自己...
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载