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

跨域的几种解决方法

作者: 非小惰 | 来源:发表于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进行跨域问题解决

相关文章

  • 跨域问题解决方法

    每个接触前端的人都会遇到前端经典跨域问题,下面介绍几种我所知道的跨解决方法 1.首先什么是跨域?即为不同域名之间相...

  • 跨域问题详解分析

    参考文档 CORS详解 跨域资源共享 CORS 详解 js中几种实用的跨域方法原理详解 跨域的那些事儿 跨域与跨域...

  • web跨域解决方案

    围绕以下几点介绍: 什么是跨域? 常用的几种跨域处理方法? crossdomain.xml解决跨域问题 什么是跨域...

  • 跨域的几种解决方法

    1、jsonp利用 来解决跨域假设当前域为localhost:8080,现想访问localhost:9090来获取...

  • 跨域的几种解决方法

    浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权情况下,不能读写对方的资源。为...

  • 几种跨域的解决方法

    浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。...

  • 跨域问题:好几种解决方案

    跨域分为广义跨域和狭义跨域 广义跨域:一个域下的文档或脚本试图去请求另一个域下的资源; 广义跨域可以分为以下几种:...

  • Ajax 请求和跨域

    跨域的几种方式: cors方式 cross-orign-resource-shareing(跨域)参考:http:...

  • #hello,JS:15 同源策略 & 跨域(JSONP)

    跨域有几种常见的方式?你有没有跨域使用的经验? 方式: 使用jsonp实现跨域?使用cors实现跨域?浏览器另类的...

  • SpringBoot 解决跨域问题

    SpringBoot 跨域问题解决方法

网友评论

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

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