跨域WebService请求 ——Nginx+SOAP服务+Ajax客户端

公羊宗清
2023-12-01

跨域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配置参见:..\Net\Nginx.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",//访问的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.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的结果

URL

说明

是否允许通信

http://www.a.com/b.js

同一域名下

允许

http://www.a.com/script/b.js

同一域名下不同文件夹

允许

http://www.a.com:8000/b.js

同一域名,不同端口

不允许

https://www.a.com/b.js

同一域名,不同协议

不允许

http://70.32.92.74/b.js

域名和域名对应ip

不允许

http://script.a.com/b.js

主域相同,子域不同

不允许

http://a.com/b.js

同一域名,不同二级域名(同上)

不允许

http://www.b.com/b.js

不同域名

不允许

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服务器代理客户端。


 类似资料: