• 有关Ajax跨域请求的解决方案


    前言

    最近博主在赶项目进度。所以微信二次开发那边的博文一直没有更新。后续时间会慢慢记录这个学习历程的。来年公司要开发微信小程序。到时也会记录一下历程。
    闲话少说,今天在工作中遇到了SpringMVC接收json形式的参数需求,就自己写了一张页面发送Ajax请求来测试。由于不想再正开发的项目中添加无用的测试。就另起了一个Web项目来做。这样就遇到了一个新的问题。Ajax如何发送跨域请求。
    刚开始想的是如何从JSP页面中发送这个请求。看了度娘中的帖子以及各大论坛中的相关方案,也尝试了不少。在此,就说一下自己的历程。
    AJAX垮与请求实现方案一

    首先是一种从JSP访问本地Servlet,然后经Servlet发送到服务器A中的Controller方式,不过很遗憾,没有解决博主的问题。但是还是值得来说一下这个思路的 - 在虚拟机中建立了一个项目来发送ajax请求,发送到虚拟机中的一个Servlet中。该Servlet代码片段如下:
    public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    //创建一个指向外域(服务器)的链接
    URL connect = new URL("http://192.168.1.184:9090/HanYiAPP/mine/test");
    HttpURLConnection openConnection = (HttpURLConnection) connect.openConnection();
    //服务器中设定请求方式的限制(最初是由JSP页面发起的POST请求。所以直接从请求中获取了)
    openConnection.setRequestMethod(request.getMethod());
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
    //获取Ajax发来的数据
    Map<String, String[]> parameterMap = request.getParameterMap();
    Set<Entry<String, String[]>> entrySet = parameterMap.entrySet();
    Map<String,Object> map = new HashMap<String, Object>();
    for (Entry<String, String[]> entry : entrySet) {
    map.put(entry.getKey(), entry.getValue());
    }
    //转换成JSON对象
    JSONObject jsonObject = new JSONObject(map);
    //设置此URL连接可供输出
    openConnection.setDoOutput(true);
    OutputStreamWriter out = new OutputStreamWriter(openConnection.getOutputStream(),"UTF-8");
    //输出
    out.write(jsonObject.toJSONString());
    out.flush();
    //以下 用于接收服务器返回 的数据
    StringBuffer data = new StringBuffer();
    BufferedReader reader = new BufferedReader(new InputStreamReader(
    openConnection.getInputStream(), "UTF-8"));
    String line;
    while ((line = reader.readLine()) != null) {
    data.append(line);
    }
    System.out.println(data.toString());
    }
    用这个方法博主测试了很久。终究是达不到想要的结果。这个方案的结果是页面上会提示"Access-Control-Allow-Origin"这个错误(这个是要在服务器做设置的。)但是数据能够正常发送和接收。
    AJAX跨域请求解决方案二

    之后楼主就在服务器上下手了。页面这边就简简单单的写了这样的一些js
    var obj = {};
    obj['id']=1;
    obj['name'] = "test";

    			$.ajax({
    				//url:"http://localhost:8080/TestWebBefore/test",
    				url:"http://192.168.1.184:9090/HanYiAPP/mine/test",
    				type:"post",
    				contentType:'application/json',
    				dataType:"json",
    				data:JSON.stringify(obj),
    				//data:JSON.stringify($("fo").serialize()),
    				success:function(data){
    					console.log(data);
    				},
    				error:function(data){
    					console.log(data);
    				}
    			});
    

    之后便是在服务器这端做一系列的设置。
    首先要解决的是AJAX跨域问题。当然,上面那个方案也能解决跨域问题,但是那样的话需要在客户端开发新的控制器。所以不是博主想要的结果。到此,不在提上述方案了。
    度娘了一下AJAX跨域,发现还是有很多的码友在解决这样的事。在此,推荐一篇日志。是有关跨域资源共享的。各大论坛中总是粗略的说一下设置响应头就能解决,但是具体问题具体分析嘛。在SpringMVC种最有效的方式就是写一个filter来处理响应。核心代码如下:
    HttpServletResponse rep = (HttpServletResponse)response;
    rep.addHeader("Access-Control-Allow-Origin", "");
    rep.addHeader("Access-Control-Allow-Methods", "POST,GET");
    rep.addHeader("Access-Control-Allow-Credentials", "true");
    rep.addHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
    chain.doFilter(request, response);
    为什么要推荐那一篇日志呢。因为上述方法中涉及的参数在日志中已经有了很好的解释和说明。
    Access-Control-Allow-Origin这个字段是必须的。值为
    代表着允许任何域访问。多个域的话可以用空格隔开(具体没有测试)
    Access-Control-Allow-Methods这个字段是必须的。值为请求类型名。
    Access-Control-Allow-Credentials该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,
    Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以
    包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏
    览器发送Cookie,删除该字段即可。
    Access-Control-Expose-Headers该字段可选。跨域请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个
    基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
    如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader('FooBar')可以返回FooBar字段的值。
    上述解释来自日志跨域资源共享。
    这样一来,就AJAX可以发送跨域请求了。
    AJAX跨域请求解决方案三

    $.getJSON("http://URL?jsoncallback=?",JSON.stringify(obj),function(json){console.log(json);});
    上述方式只能作用于GET请求
    大概就有这样的几种方式来解决AJAX跨域问题。如果还有别的方案也可以一起交流哦

  • 相关阅读:
    pyspider 在ubuntu上安装失败怎么搞?
    怎么在项目中使用前端包管理器bower和构建工具gulp
    Asp.net mvc 实时生成缩率图到硬盘
    如果转载优酷、土豆视频等,怎么让视频自适应宽度?
    C语言II博客作业04
    C语言I博客作业03
    C语言II博客作业02
    C语言II博客作业01
    学期总结
    The first essay
  • 原文地址:https://www.cnblogs.com/tdg-yyx/p/6823084.html
Copyright © 2020-2023  润新知