浏览器跨域的解决方案

最新推荐文章于 2024-04-29 16:58:53 发布

luoluoluoluolou

最新推荐文章于 2024-04-29 16:58:53 发布

阅读量357

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/luoluoluoluolou/article/details/76376818

版权

java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

解决方案

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>

luoluoluoluolou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器跨域的解决方案

原理很多博客写的很详细，这里只提供解决代码解决方案1,jsonp JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。其实是用回调的思想解决跨域的问题 JSONP只支持
复制链接

扫一扫

专栏目录