浏览器跨域的解决方案

来源：互联网发布：吴德周知乎编辑：程序博客网时间：2024/05/20 05:26

原理很多博客写的很详细，这里只提供解决代码

解决方案

1,jsonp    JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。其实是用回调的思想解决跨域的问题    JSONP只支持GET请求    贴前端代码

<!DOCTYPE HTML><html><head><script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">    $(function(){        //按钮单击时执行        $("#testAjax").click(function(){              //Ajax调用处理            $.ajax({               type: "get",               url: "http://localhost:8080/springmvc_maven_demo/hii2",//路径根据自己的               success: function(data,textStatus){                       console.log(data)                       alert(textStatus);               },               dataType : 'jsonp',**//重点**               jsonpCallback:"cb",**//重点**            });         });    });</script>    </head>    <body>        <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>        <button id="testAjax" type="button">Ajax改变内容</button>    </body></html>

后端代码

   @RequestMapping(value="/hii2",method = RequestMethod.GET)    public String handleRequest2(HttpServletRequest req, HttpServletResponse resp) {        BaseResponse baseResponse = new BaseResponse();//        JSONObject object = new JSONObject();//        object.put("one","hiworld");        Map<String,Object> object = new HashMap<String, Object>();        object.put("one","规划");        baseResponse.setSuccess(true);        baseResponse.setContent(object);        String jsonp="cb("+ JSONObject.toJSONString(baseResponse)+")";**//重点**        return jsonp;    }

2,response.setHeader("Access-Control-Allow-Origin","*");

其实就是在过滤器中添加 response.setHeader(“Access-Control-Allow-Origin”,”*”)，实现方式可以自定义一个filter，加载web.xml中
这种方式支持get，post

  <filter>    <filter-name>filterTest</filter-name>    <filter-class>com.filter.FilterTest</filter-class>    <init-param>      <param-name>encoding</param-name>      <param-value>UTF-8</param-value>    </init-param>  </filter>  <filter-mapping>    <filter-name>filterTest</filter-name>    <url-pattern>/*</url-pattern>  </filter-mapping>

filter代码

public class FilterTest implements Filter{//省略    @Override    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {        System.out.println("过滤器进行中");        // TODO Auto-generated method stub        HttpServletRequest hRequest=(HttpServletRequest)request;        HttpServletResponse hResponse=(HttpServletResponse)response;        //Conditionally select and set the character encoding to be used        if(ignore || hRequest.getCharacterEncoding()==null){            String coding=selectEncoding(hRequest);            if(coding!=null){                hRequest.setAttribute("","*");                hRequest.setCharacterEncoding(coding);                hResponse.setCharacterEncoding(coding);                hResponse.setHeader("Access-Control-Allow-Origin","*");//**重点**            }        }        //将控制器传向下一个filter        chain.doFilter(hRequest, hResponse);    }//省略}

前端代码：

<!DOCTYPE HTML><html><head><script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">    $(function(){        //按钮单击时执行        $("#testAjax").click(function(){              //Ajax调用处理            $.ajax({               type: "post",//或者get               url: "http://localhost:8080/springmvc_maven_demo/hii3",               success: function(data,textStatus){                       console.log(data)                       alert(textStatus);               },               dataType : 'json',            });         });    });</script>    </head>    <body>        <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>        <button id="testAjax" type="button">Ajax改变内容</button>    </body></html>

阅读全文

0 0