js 调用webservice及nigix解决跨域问题

前言

我们写一些简单的爬虫的时候会遇到跨域问题，难道我们一定要用后台代理去解决吗？

答案是否定的。python之所以适应爬虫，是因为库真的很好用。

好吧python不是今天的主角，今天的主角是js。

正文

因为api的很简单，所以我这里写webservice的，因为有时候你可能会遇到webservice，当然这是一些老项目了。

这是里面的webservice的一个方法:

[WebMethod]

public int sum(int a,int b)

{

     return a + b;

}

下面是文档:

接下来就是如何去调用他:

function RequestWebService() {

	let data = `<?xml version="1.0" encoding="utf-8"?>

	<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">

	   <soap12:Body>

		   <sum xmlns="http://tempuri.org/">

				<a>1</a>

				<b>5</b>

		   </sum>

		 </soap12:Body>

	</soap12:Envelope>`;

	$.ajax({

		headers: { SOAPAction: 'http://tempuri.org/sum' },

		contentType: 'text/xml;charset="UTF-8"',

		dataType: 'xml',

		type: 'post',

		url: 'http://localhost:10050/myWebServie.asmx',

		data: data,

		success: function (data) {

			console.log(data);

		}

	});

}

然后获得了：

<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">

<soap:Body>

<sumResponse xmlns="http://tempuri.org/">

<sumResult>6</sumResult>

</sumResponse>

</soap:Body>

</soap:Envelope>

但是呢，这个html是和webservice在同一个端口下，那么不同端口肯定会出现跨域问题。

请求数据:

那么这个时候怎么破呢？

在nginx配置下面:

location /myWebServie.asmx {

	proxy_pass http://localhost:10050/myWebServie.asmx

}

然后将页面部署到nginx下面的8085端口下；

然后你在页面中访问的就是:http://localhost:8085/myWebServie.asmx

效果:

返回结果就是200了。

原理非常简单，我们这样做可以骗过浏览器，以为我们访问的是8085端口，实际上访问的到nginx的时候访问的是10050端口。