精华内容
下载资源
问答
  • 主要介绍了java服务器端跨域问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • PHP服务器端跨域

    2019-07-10 11:40:00
    PHP服务器端跨域 header("Access-Control-Allow-Origin: *"); //允许所以网站跨域 header("Access-Control-Allow-Origin: qq.com"); //允许部分网站跨域 header("Access-Control-Allow-Methods:POST,GET"); //...

    PHP服务器端跨域

    header("Access-Control-Allow-Origin: *"); //允许所以网站跨域

    header("Access-Control-Allow-Origin: qq.com"); //允许部分网站跨域

    header("Access-Control-Allow-Methods:POST,GET"); //允许接口请求方式

    header("Access-Control-Allow-Headers:x-requested-with,content-type");

    header("Content-type:text/json;charset=utf-8");

    转载于:https://www.cnblogs.com/lezuw/p/11162922.html

    展开全文
  • 服务器端 跨域设置 PHP $allowHosts = ['http://www.wxshop.dev']; $requestHost = $req->server('HTTP_ORIGIN','');//获得请求头的域名信息 if(in_array($requestHost,$allowHosts)){ header("Access-Control-...

    服务器端 跨域设置 PHP

      $allowHosts = ['http://www.xxx.xxx'];
    
       $requestHost = $req->server('HTTP_ORIGIN','');//获得请求头的域名信息
    
       if(in_array($requestHost,$allowHosts)){
    
           header("Access-Control-Allow-Origin:".$requestHost);
    
           header("Access-Control-Allow-Headers:X-Requested-With,Content-Type");
    
           header("Access-Control-Allow-Methods:post");
    
           header("Access-Control-Allow-Credentials:true");
       }
    展开全文
  • JSONP (json with padding):不属于Ajax请求,但可以模拟Ajax请求,将不同源的服务器端请求地址写在script标签的src属性中 <!-- 1.将非同源服务器端的请求地址写在script标签的src属性中 --&

    同源政策:如果两个页面拥有相同的协议、域名和端口则同源,如果其中有一个不一样就是不同源。
    同源政策是为了保证用户信息安全,防止恶意的网站窃取数据,在同源政策下无法向非同源地址发送Ajax请求。

    跨域: 为了解决同源限制问题,主要有JSONPCORS服务器端跨域几种方法

    • JSONP (json with padding):不属于Ajax请求,但可以模拟Ajax请求,将不同源的服务器端请求地址写在script标签的src属性中。
    1. 将非同源服务器端的请求地址写在script标签的src属性中
       <script src="http://localhost:3001/test"></script>
    
    1. 服务器端响应数据必须是一个函数的调用,要发送给客户端的数据需要作为函数调用的参数
    const data = 'fn({name: 'lisi', age: 20})'
    
    1. 在客户端全局作用下定义函数fn
    function fn (data) {
    }
    
    1. 在fn函数内部对服务器端返回的数据进行处理
    function fn (data) {
    	console.log('客户端的fn函数被调用了')
    	console.log(data);
    }
    

    jsonp封装函数

    function jsonp(options){
        //动态创建script标签
        var script = document.createElement('script') 
        //需要传递的参数拼接
        var params = ''
        for(var item in options.data){
            params += '&'+ item + '=' + options.data[item] 
        }
        //注册全局函数,使得调用jsonp时不用在外部定义函数;保证每次请求函数名的唯一性
        var fnName = 'Jsonp0fn' + Math.random().toString.replace('.','')
        window[fnName] = options.success
        //为script标签添加贷函数名的src属性
        script.src = options.url +'?callback=' + fnName + params
        // 将创建好的script标签添加到页面中
        document.body.appendChild(script)
        // 加载完成后删除该script标签
        script.onload = function(){
            document.body.removeChild(script)
        }
    
    }
    
    jsonp({
        data: {'name':'zhangsan','age':'19' },
        url: 'http://localhost:3001/better',
        success: function (res) {
            console.log('请求成功');
            console.log(res);
        }
    })
    
    • CORS (cross-origin resource sharing):跨域资源共享,它允许浏览器向跨域服务器发送Ajax请求。
    1. 在服务器端的响应头中设置'Access-Control-Allow-Origin'指定可以访问自身的客户端地址
    2. 在服务器端的响应头中设置'Access-Control-Allow-Methods'指定可以进行访问的方法
    app.get('/cross', (req, res) => {
    	res.send('ok')
    });
    
    // 拦截所有请求
    app.use((req, res, next) => {
    	// 1.允许哪些客户端访问我
    	// * 代表允许所有的客户端访问我
    	// 注意:如果跨域请求中涉及到cookie信息传递,值不可以为*号 比如是具体的域名信息
    	res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
    	// 2.允许客户端使用哪些请求方法访问我
    	res.header('Access-Control-Allow-Methods', 'get,post')
    	// 允许客户端发送跨域请求时携带cookie信息
    	res.header('Access-Control-Allow-Credentials', true);
    	next();
    });
    
    1. 客户端正常发送Ajax请求
    ajax({
    	type: 'get',
    	url: 'http://localhost:3001/cross',
    	success: function (data) {
    		console.log(data)
    	}
    })
    
    • 服务器端跨域:同源政策是浏览器给Ajax技术的限制,服务器端不存在同源政策限制。所以我们可以让A服务器端访问B服务器端,再将访问到的数据响应给A客户端,从而实现A客户端访问B服务器端数据的目的。

    在这里插入图片描述

    1. 在A服务器端通过第三方模块request向B服务器端发送请求
    // 引入向其他服务器端请求数据的模块
    const request = require('request');
    app.get('/server', (req, res) => {
    	//向B服务器发起请求
    	request('http://localhost:3001/cross', (err, response, body) => {
    		res.send(body);
    	})
    });
    
    1. 在A客户端中通过Ajax访问A服务器中响应到的B服务器端的数据
    ajax({
    	type: 'get',
    	url: 'http://localhost:3000/server',
    	success: function (data) {
    		console.log(data);
    	}
    })
    
    展开全文
  • 服务器端跨域解决方案 网站越来越需要彼此协作。 例如,在线房屋租赁网站需要Google Maps支持以显示特定房屋的位置。 为了满足这样的需求,出现了各种混搭。 mashup是一个Web应用程序,它集成了来自不同提供程序的...

    服务器端跨域解决方案

    网站越来越需要彼此协作。 例如,在线房屋租赁网站需要Google Maps支持以显示特定房屋的位置。 为了满足这样的需求,出现了各种混搭。 mashup是一个Web应用程序,它集成了来自不同提供程序的数据或组件,以使其更加有用或更具自定义性。 混搭或协作功能被视为Web 2.0的重要组成部分。

    令人惊讶的是,将异步JavaScript和XML(Ajax)与混搭结合起来并不容易。 由于浏览器施加的安全限制,使页面上的不同小部件相互通信也很麻烦。 传统上,您可以通过在服务器端设置不可扩展的代理来解决此问题。 在本文中,了解有关客户端的其他一些解决方案,用于跨域通信和数据传输。

    安全限制

    相同的来源策略(SOP)阻止从一个来源加载的脚本从另一个来源获取或操纵文档中的属性或方法。 术语“ 起源”是域名,应用程序协议和运行脚本的文档端口的组合。 关于SOP概念可能会有误解; 这意味着不止站点A无法从站点B获取信息。您需要知道在SOP限制下可以做什么和不能做什么。

    SOP的局限性

    例如,来源A的网页可以:

    • 从原点B获取脚本,CSS样式表或图像
    • 包含指向原点B的页面的iframe /框架
    • 使用HTML元素(例如iframeimgsrc属性将一些信息发送到原点B

    来源A的网页无法:

    • 发起对源B的Ajax调用
    • 在指向B页的iframe /框架中读取或操作内容

    为什么会这样呢? 主要是保护用户的重要信息。 假设是:如果用户与一个提供程序进行交互,则他不希望将提交给该站点的任何信息泄露给其他站点。 这种限制限制了不同网站之间的合作,但可以保护用户免受潜在有害攻击的侵害。

    有许多解决问题的方法。 例如,JSONP利用了以下事实:网页可以从任何来源动态加载脚本。 但是,JSONP有两个主要限制:它没有像Ajax调用那样的错误处理机制,并且脚本标记请求是Get method ,它具有长度限制。 (有关JSONP的更多信息,请参阅“ 相关主题”部分。)

    以下各节讨论了跨域通信和数据传输的客户端解决方案。 每种解决方案都有优点和缺点; 应用程序方案在很大程度上影响您的选择。

    跨子域解决方案

    如果源A和源B共享相同的超级域,则很容易通过document.domain属性的更改使两个文档相互访问。 document.domain是HTML规范中的只读属性; 大多数现代浏览器都允许将其设置为超级域(而不是顶级域)。 例如,URL为www.myapp.com/index.html的文档可以将其自己的域设置为myapp.com ,而sample.myapp.com/index2.html中的另一个文档也可以将其自身的域设置为myapp.com 图1显示了document.domain工作方式。

    图1. document.domain
    通过将各自的域设置为相同的超级域来描述来自相同超级域的具有不同URL的文档

    使用此跨子域解决方案,来自不同子域的源可以在同一超级域下进行通信,这不是SOP限制。 但是,严格来说,跨子域解决方案最适合Intranet应用程序。

    URL.hash(片段ID)解决方案

    URL由几部分组成,如下图2所示:

    图2. URL的组成
    URL屏幕截图,其中的行分隔并指定了不同的URL组件(协议,主机,路径名,查询和哈希)

    传统上,对URL的任何更改都会加载新的网页。 例外是哈希值的更改。 URL哈希的任何更改都不会导致页面刷新。 在部分刷新页面时,哈希已在许多Web 2.0网站中广泛用于为每个步骤添加书签。 在跨域通信中,哈希也是宝贵的资产。 来自不同来源的文档可以设置彼此的URL,包括哈希值,尽管在获取彼此的哈希值方面存在限制。 这些文档可以使用散列相互发送消息。 图3显示了一个示例。

    图3.使用URL.hash(片段ID)进行通信
    通过修改彼此的哈希值并监视自身哈希值的变化来描述具有不同URL的文档的通信

    在图3中,当A要向B发送消息时,它可以修改B的哈希值,如清单1所示:

    清单1.通过url.hash发送消息
    function sendMsg(originURL, msg){
    	var data = {from:originURL, msg:msg};
    	var src = originURL + “#” + dojo.toJson(data);
    	document.getElementById('domainB').src=src;
    }

    B中的函数将轮询其自身的哈希值,并找出A发送的内容。 它可以以相同的方式回复A。 如果A想要接收此消息,它还应该轮询自身的哈希值。

    清单2.监视url.hash并从中接收消息
    window.oldHash="";
    checkMessage = function(){
    	var newHash = window.location.hash;
    	if(newHash.length > 1){
    		newHash = newHash.substring(1,newHash.length);
    		if(newHash != oldHash){
     		oldHash = newHash;
     		var msgs = dojo.fromJson(newHash);
     		var origin = msgs.from;
     		var msg = msgs.msg;
     			 sendMessage(origin, "Hello document A");
     		 }
     	}
    }
    window.setInterval(checkMessage, 1000);
    sendMessage = function(target, msg){
    	var hash = "msg="+ msg;
    	parent.location.href= target + “#” + hash;
    }

    与JSONP一样,此方法也有长度限制,但可以更好地处理错误。 某些特殊字符(例如问号(?))是URL中的保留字符,应首先进行编码。

    清单3.通过url.hash发送包含特殊字符的消息
    function sendMsg(originURL, msg){
    	…
    	var src = originURL + “#” + encodeURI (dojo.toJson(data));
    	…
    }

    并且,在接收时,您应该先对其进行解码。

    清单4.接收包含特殊字符的消息
    function checkMsg(){
    	…
    	var msgs = decodeURI(dojo.fromJson(newHash)); 
    	…
    }

    跨碎片技术

    由于哈希已经在许多网站中用于其他用途,因此对于那些网站而言,将URL.hash(fragment id)技术用于跨域通信和数据传输将变得很复杂。 跨帧消息传递有点类似于片段ID消息传递。 图4显示了交叉碎片技术的工作原理。

    图4.跨碎片技术
    通过动态创建指向目标文档所在域中的代理的iframe来通信具有不同URL的文档的描述,该iframe将获取请求/数据并通过调用目标文档中的相应功能进行响应

    在上图中,当A要与iframe B通信时,它将首先在其自身中创建一个iframe。 此iframe指向与B相同的域中的“代理”C。它将在代理的URL中包括参数或数据以及B的帧标识符。

    清单5.以跨碎片技术发送消息
    function sendMsg(msg){
     var frame = document.createElement(“iframe”);
     var baseProxy = “http://www.otherapp.com/proxy.html”;
     var request = {frameName:’otherApp’,data:msg};
     frame.src = baseProxy+”#”+encodeURI (dojo.toJson(request));
     frame.style.display=”none”;
     document.body.appendChild(frame);
    }

    当C加载时,它从A获取请求和数据,并在B中调用相应的方法。由于B和C在同一个域中,因此它们可以通过另一个窗口的处理程序直接调用另一个方法。 A可以成功向B发送消息,而B可以以相同的方式响应。

    清单6.跨碎片技术接收消息
    window.onLoad = function(){
         var hash = window.location.hash;
         if(hash && hash.length>1){
              var request = hash.substring(1,hash.length);
              var obj = dojo.fromJson(decodeURI (request));
              var data = obj.data;
              //process data
              parent.frames[obj.frameName].getData(…);// getData in a function defined in B
         }
    }

    OpenAjax实现

    OpenAjax提供了受管集线器模块,以基于片段ID和跨框架技术支持跨域通信和数据传输。 托管集线器模块包括管理器端和客户端。 托管中心包含一个消息中心,用于存储消息。 每个想要与其他人进行通信的小部件都将在其自身中设置一个集线器客户端,并且还将设置一个相应的容器以与其连接。 容器将代表客户端与托管集线器进行交互。 客户端可以使用订阅/发布机制发送和接收消息。 OpenAjax的基本工作流程如图5所示。

    图5. OpenAjax的主要工作流程
    描述OpenAjax实现跨域通信的主要工作流程

    Window.name解决方案

    Window.name是跨域通信和数据传输的棘手解决方案。 传统上, window.name的用法如下。

    • 使用window.frames[windowName]获取子窗口。
    • 将其设置为链接元素中的目标属性。

    尽管window.name具有显着的特征,使其适合于不同来源的文档之间的“桥梁”,但它并不是一个经常使用的属性。 无论加载什么页面, window.name的值都保持不变。 在SOP限制下如何使用? 图6说明window.name如何协助跨域通信。

    图6. window.name和跨域通信
    通过使用存储服务器响应的window.name以及从客户端回滚并检查window.name值的描述来从其他域获取资源

    当页面A要获取其他来源的资源或网络服务时,它可以在其自身中添加新的隐藏iframe B,以外部资源或服务为目标。 服务器将以HTML文件响应,从而将window.name属性设置为数据。 由于A和iframe B现在不在同一个域中,因此A仍无法获得B的name属性。在B获得数据之后,应将其导航回与A处于同一个域的任何页面以创建name属性A可以访问A。在A获得数据之后,B可以随时被销毁。

    使用dojox.io.windowName进行跨域通信

    Dojo提供了对基于window.name的跨域通信的支持。 唯一的API是dojox.io.windowName.send(method, args) ,类似于dojo.xhrGet/dojo.xhrPost 该方法可以是GETPOST ,并且argsdojo.xhrargs相似。 例如,您可以在客户端发送跨域请求,如清单7所示:

    清单7.通过window.name发送消息
    var args = {
     url: "http://www.sample.com/testServlet?windowName=true",
     load: function(data){
     alert("You've got the data from server " + data);
        },
    error: function(error){
     alert("Error occurred: " + error);
     }
    }
    dojox.io.windowName.send("GET",args);

    您可以dojox.io.windowName使用dojo.xhr一样使用dojox.io.windowName 对于服务器端,建议如果希望通过windowname传输访问资源或服务,请检查请求中的windowName参数。 如果请求中包含此类参数,则服务器应使用HTML文档进行响应,该HTML文档window.namewindow.name设置为需要传递给客户端的数据。 清单8中的代码显示了一个示例。

    清单8.对window.name消息技术的后端支持
    testServlet.java:
    protected void doGet(HttpServletRequest request,HttpServletResponse response){
     //process request
     String returnData = ...;
     String isWindowNameReq = request.getParameter(“windowName”);
     if(null !=isWindowNameReq && Boolean.parseBoolean(isWindowNameReq)){
    	 returnData = getCrossDomainStr(returnData);
    }
     response.getOutputStream().print(returnData);
    }
    private String getCrossDomainStr(String data){
     StringBuffer returnStr = new StringBuffer();
     returnStr.append("<html><head><script type=\"text/javascript\">window.name='");
     returnStr.append(data);
     returnStr.append("'</script></head><body></body></html>");
     return returnStr.toString();
    }

    将框架导航回原始域中的任何页面时,应确保该页面存在于域中。 如果该页面不存在,Internet Explorer将出现问题。 在Firefox中,您可以简单地使用blank.html 在Dojo中,您可以使用dojo.dojoBlankHtmlUrl属性指定要回滚的页面。 默认情况下,它在Dojo库下设置为dojo / resources / blank.html。

    使用window.name传输的数据量比使用url.hash传输的数据量url.hash 大多数现代浏览器都基于window.name支持16M +数据传输。

    HTML5的新功能

    在HTML5规范草案中,新方法window.postMessage(message, targetOrigin)用于安全的跨域通信。 调用它时,将调度一个消息事件,并且,如果窗口正在侦听该消息事件,则它可以从事件中获取消息和消息的来源。 图7显示了一个示例。

    图7.与HTML5的跨域通信
    通过HTML5中的本机函数(window.postMessage)和消息事件侦听器来描述跨域通信

    在图7中,当iframe希望从另一个来源通知父窗口它已成功加载时,它可以通过window.postMessage发送消息。 同时,它将监视反馈消息,如清单9所示:

    清单9.通过HTML5新方法发送消息
    http://www.otherapp.com/index.html
    function postMessage(msg){
         var targetWindow = parent.window;
          targetWindow.postMessage(msg,"*");
    }
    function handleReceive(msg){
     var object = dojo.fromJson(msg);
     if(object.status == “ok”){
    	//continue to do other things
    	……
     }else{
    	//retry sending msg
    	……
     }
    }
    window.addEventListener("message", handleReceive, false);
    window.onLoad = function(){
        postMessage("already loaded");
    }

    父文档将监听消息事件。 消息到达时,首先检查它是否来自www.otherapp.com ,然后返回确认消息。

    清单10.通过HTML5新方法接收消息
    http://www.myapp.com/index.html
    function handleReceive(event){ 
        if(event.origin != "http://www.otherapp.com")
            return; 
         //process data
         ……
         var otherAppFrame = document.getElementById(“otherApp”) 
         otherAppFrame.postMessage(“{status:’ok’}”,”http://www.otherapp.com”);
    }
    window.addEventListener("message", handleReceive, false);

    Lising 10中的示例代码可以在Firefox 3 +,Internet Explorer 8,Google Chrome 2,Opera 9+和Safari 4中运行。它促进了不同来源文档之间的通信。 而且,如果您自己的文档不想接收来自其他文档的任何消息,请不要添加消息事件侦听器并忽略所有消息。


    翻译自: https://www.ibm.com/developerworks/web/library/wa-crossdomaincomm/index.html

    服务器端跨域解决方案

    展开全文
  • https://blog.csdn.net/belalds/article/details/79970637 https://blog.csdn.net/weixin_36524613/article/details/80906274 https://blog.csdn.net/ligang2585116/article/details/73072868 ...
  • 服务器端跨域访问(CROS)解决方案

    千次阅读 2015-03-10 17:47:32
    怎样配置Apache 服务器允许跨域名请求 How do we fix cross domain scripting issue ? The simple solution is to allow the server to which request is being made to server request to any domain or to a ...
  • 服务器端解决跨域
  • java 服务器端解决跨域问题
  • CORSFilter(maven) ...CORSFilter是解决跨域访问,是在服务器端解决跨域问题,改变服务器端响应头信息Access-Control-Allow-Origin: 1)在服务器添加监听器依赖 <!--监听器--> <dependency> &l...
  • 服务器端配置跨域

    2017-11-14 20:01:59
    开发过程中,碰到了跨域问题,这种问题,可以在服务器端通过CORS的方法解决。 OTP项目解决跨域: @Configuration public class WebConfig extends WebMvcConfigurerAdapter { @Override public void ...
  • 服务器端解决跨域

    2019-10-06 10:07:04
    header('Access-Control-Allow-Origin:http://www.baidu.com'); 转载于:https://www.cnblogs.com/zuikeol/p/10281148.html
  • 服务器端支持跨域

    千次阅读 2015-06-08 00:32:47
    服务器端使用spring MVC编写 使用过滤器public class SimpleCORSFilter implements Filter{ @Override public void destroy() { } @Override public void doFilter(ServletRequest req, ServletResponse res,
  • 跨域是指html文件所在的服务器与ajax请求的服务器是不同的ip+port,例如: ‘192.168.1.1:8080’ 与 ‘192.168.1.2:8080’是不同的域。 ‘192.168.1.1:8080’ 与 ‘192.168.1.1:8081’是不同的域。 解决此类问题的...
  • 服务器端解决跨域问题的三种方法
  • 1.跨域请求,就是这个服务器去拿另一个服务器的资源,另一个服务器的域名肯定和当前的服务器域名不一样嘛。 浏览器默认是不允许跨域请求的,是浏览器对JavaScript施加的安全限制。是浏览器对JavaScript施加的安全...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,245
精华内容 1,298
关键字:

服务器端跨域