跨域WebService请求
——Nginx+SOAP服务+Ajax客户端
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和客户端置于同一域中。
//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的结果
| 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服务器代理客户端。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
