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

来源：互联网发布：js中a标签的href路径编辑：程序博客网时间：2024/05/16 03:19

跨域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>

$(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>

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

0 0