跨域WebService请求 ——Nginx+SOAP服务+Ajax客户端
|
跨域WebService请求 ——Nginx+SOAP服务+Ajax客户端 sf2gis@163.com 2015年12月14日 ? 1?目标：将WebService和客户端部署在不同的服务器，由客户端请求服务。2?原理：Nginx将不同域的HTTP服务、网站放入统一的域中，规避跨域问题。不同的服务器位置于不同的域。JavaScript安全性不允许POST的跨域请求（GET可以与服务器配合使用JSONP，有些勉强）。SOAP只能使用POST请求，所以无法直接跨域。一般的解决方案是使用服务器代理（由同域服务器跨域请求后返回），但导致过于复杂（参见：Java-webservice-CXF-SOAP服务.docx服务器代理）。 3?流程：发布WebService，发布Web网站，设置Nginx反向代理，修正WebService的同域URL。3.1 发布WebService：Java-webservice-CXF-SOAP服务.docx流程3.2 发布Web网站：新建Dynamic Web Application，添加index.html作为请求的客户端，添加相关的js文件。客户端详情参见：基于SOAP的Web服务AJAX客户端.docx //index.html <!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title>Insert titlehere</title> </head> <scripttype="text/javascript"src="jquery-1.11.3.js"></script> <body> ????? <button type="button" id="name">Web服务请求-SOAP</button> ????? <script type="text/javascript"> ?????????? $(function() { ???????????????? $("#name").click(function() { ????????????????????? var mySoapXml = '<soap:Envelopexmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" '+ ? ????????????????????????? ???'xmlns:xsd="http://www.w3.org/2001/XMLSchema"'+ ? ????????????????????????? ???'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+ ? ????????????????????????? ???'<soap:Bodyxmlns:lee="http://lee/"><lee:sayHello/></soap:Body></soap:Envelope>'; ????????????????????? $.ajax({ ?????????????????????????????????????? url :"/CXFSoapDemo/services/HelloWorld",//访问的url ?????????????????????????????????????? dataType : 'xml',//返回的数据类型 ?????????????????????????????????????? type : 'post',//请求方式 ?????????????????????????????????????? contentType :'application/soap+xml;charset=UTF-8', ?????????????????????????????????????? data : mySoapXml,//数据 ?????????????????????????????????????? success : function(data,status, ????????????????????????????????????????????????? xhr) { ???????????????????????????????????????????? //对返回后的数据进行解析 ???????????????????????????????????????????? $(data).find("return").each( ????????????????????????????????????????????????? function(index,item){ ????? ????????????????????????????????????????????????? console.debug(item.innerHTML)?????????????????????????????????????????????????????? ??????????????????????????????????????????????????????? console.debug($(this)); ???????????????????????????????????????????? }); ?????????????????????????????????????? }, ?????????????????????????????????????? error : function(xhr,status){ ???????????????????????????????????????????? alert("出错了:" +status); ?????????????????????????????????????? } ??????????????????????????? }); ????????????????????? }); ???????????????? }); ????? </script> </body> </html> 3.3 设置Nginx反向代理：设置WebService和客户端网站位于同一域。新建Nginx的配置文件：/etc/nginx/conf.d目录中添加soap.conf，将WebService和客户端置于同一域中。 Nginx配置参见：..NetNginx.docx //soap.conf server { ??????? listen?????? 80; ??????? server_name? localhost; ? ????? #ajax client web ????? location/client { ??????????? index? index.html index.htm index.jsp; ??????????? proxy_passhttp://192.168.41.134:8080/SoapAjaxClient/; ????? } ????? ????? #root ????? location/{ ??????????? proxy_pass http://localhost/client; ????? } ? ????? #webservice ?location /services { ??????????? proxy_passhttp://192.168.41.134:8080/CXFSoapDemo/services/; ??????? } } 3.4 修改客户端请求的服务URL：将客户端指向的URL地址设置为Nginx设置的URL。<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title>Insert titlehere</title> </head> <scripttype="text/javascript" src="jquery-1.11.3.js"></script> <body> ????? <button type="button" id="name">Web服务请求-SOAP</button> ????? <script type="text/javascript"> ?????????? $(function() { ???????????????? $("#name").click(function() { ????????????????????? var mySoapXml = '<soap:Envelopexmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" '+ ? ????????????????????????? ???'xmlns:xsd="http://www.w3.org/2001/XMLSchema"'+ ? ????????????????????????? ???'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+ ? ????????????????????????? ???'<soap:Bodyxmlns:lee="http://lee/"><lee:sayHello/></soap:Body></soap:Envelope>'; ????????????????????? $.ajax({ ?????????????????????????????????????? url :"/services/HelloWorld",item){ ??????????????????????????????????????????????????????? console.debug(item.innerHTML)?????????????????????????????????????????????????????? ??????????????????????????????????????????????????????? console.debug($(this)); ???????????????????????????????????????????? }); ?????????????????????????????????????? },status){ ???????????????????????????????????????????? alert("出错了:" +status); ?????????????????????????????????????? } ??????????????????????????? }); ????????????????????? }); ???????????????? }); ????? </script> </body> </html> 3.5 测试：http://192.168.41.134/client，点击请求SOAP。结果：得到服务回复。 4?方法：域和跨域参考：http://blog.jobbole.com/90975/ 4.1 同源和跨域：URL的协议，域名，端口相同。同源的js可以通信，不同源的url被称为跨域，不允许通信，目的是保证页面信息的安全。 如http://www.a.com/a.js访问以下URL的结果
4.2 跨域通信：分布式网站通信4.2.1目标：请求其它域的网站信息。4.2.2原理：规避跨域或与服务器协商。规避跨域（推荐）将多个网域置于同域，如Nginx或服务器代理，实现安全的通信。 服务器协商（不推荐）请求服务器为指定的URL跨域请求放行，如JSONP或CROS。 参考：http://blog.jobbole.com/90975/ http://wolf123.blog.163.com/blog/static/175054298201231833413526/ 4.2.3方法：Nginx、服务器代理4.2.3.1? Nginx：使用Nginx将跨域网站置于虚拟的同一域中。参见：流程：发布WebService，发布Web网站，设置Nginx反向代理，修正WebService的同域URL。 4.2.3.2? 服务器代理：在服务器端接受请求，然后请求跨域服务，返回客户端。参见：Java-webservice-CXF-SOAP服务.docx服务器代理客户端。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |