美文网首页程序员
跨域的几种解决方法

跨域的几种解决方法

作者: 非小惰 | 来源:发表于2018-11-05 23:50 被阅读33次

    1、jsonp
    利用

    <script src="" > 
    

    来解决跨域
    假设当前域为localhost:8080,现想访问localhost:9090来获取数据则可以

    $('head').append("<script src='http://localhost:9090/user/getUserData?userId="123"' callback=showUserData>")
    
    //后台代码
    response.setAttribute("callback","xxxxxxxxxx")
    

    2 postMessage
    通过

    otherWindow.postMessage(message, targetOrigin, [transfer])
    

    otherWindow
    其他窗口的一个引用
    message
    将要发送到其他 window的数据
    targetOrigin
    通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送
    transfer 可选
    是一串和message 同时传递的Transferable对象

    例如

    //http://locahost:8080/test1.html
    <iframe id="ifraTs2" src="http://localhost:9090/test2.html" >
    
    <scirpt>
       var message = "Hello";
       var targetOrigin = "http://localhost:9090";
        $('#ifraTs2'). contentWindow.postMessage(message,targetOrigin);
    </script>
    
    //test2.html    接收消息页面添加message监听
    <script>
     window.addEventListener("message",function(event) {
       //判断信息来源地址
        if(event. origin == "http://localhost:8080"){
        }
    })
    </script>
    

    3、后台拦截器进行请求头修改

     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
                        throws Exception {
                        response.addHeader("Access-Control-Allow-Origin", "*");
           response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
                        response.addHeader("Access-Control-Allow-Headers",
                                "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,token");
                    return true;
                }
    

    4配置nginx
    通过nginx来进行不同服务器的跳转
    个人推荐nginx进行跨域问题解决

    相关文章

      网友评论

        本文标题:跨域的几种解决方法

        本文链接:https://www.haomeiwen.com/subject/qbnexqtx.html