你的位置:首页 > ASP.net教程

[ASP.net教程]使用代理解决跨站点请求和跨站点上传文件


在做Web系统的时候,我们经常会使用Ajax技术来实现异步加载数据的功能,开始的时候我们的系统只有一个,但随着业务的发展,我们的Web系统可能有很多个,而且每个系统可能都是一个独立的站点,那么当我们直接使用Ajax技术来访问其它站点时,就会出现意外。

假设我们直接使用jQuery提供的Ajax方法来把京东的首页给抓取下来,那么有如下代码:

$.ajax({
url: 'http://www.jd.com/',
type: 'get',
success: function (data) {
//todo:
}
});

但我们在浏览器上跑了这段代码之后,却发现浏览器报了一个错误:


我当前的站点是http://localhost:6404,浏览器提示说我当前的站点不被允许访问京东的站点,原因是京东的响应头里面没有“Access-Control-Allow-Origin”字段,那么“Access-Control-Allow-Origin”又是什么?

出于安全的因素,浏览器会限制我们从脚本中发起跨站请求,所以W3C工作组退出了一种新的机制,即跨源资源共享(Cross-Origin Resource Sharing (CORS)),这种机制让Web应用服务器能支持跨站访问控制,从而使得安全地进行跨站数据传输成为可能。而“Access-Control-Allow-Origin”就是该机制里面所定义的字段。W3C上有对该字段的准确定义:


上面说,该响应头决定一个资源是否可以被共享给请求头里面的“Origin”字段的值。那“Origin”是什么?我们再看看之前的Ajax请求头信息,里面确实有“Origin”字段:


请求头里面的“Origin”字段的值就是我当前的站点地址,我是从“http://localhost:6404”这个站点向“http://www.jd.com”这个站点发起的Ajax请求的。所以根据W3C的文档描述,如果京东的响应头的“Access-Control-Allow-Origin”字段里面有“http://localhost:6404”这个值,那么我就可以成功抓取到京东的首页。

由于我改不了京东的响应头“Access-Control-Allow-Origin”字段,所以我就自己建了一个新的站点来测试一下。

站点“http://localhost:6404”上发起的请求脚本:

$.ajax({
url: 'http://localhost:6408/index.ashx',
type: 'get',
success: function (data) {
alert(data);
}
});

站点“http://localhost:6408”用来响应请求的后端代码:

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:6404");
context.Response.Write(String.Format("我是站点:{0}", "http://localhost:6408"));
}

然后,我们在浏览器上跑一下,得如下结果:


从结果上可以看出,跨站点请求已经成功。接下来,我们把响应头里面的“Access-Control-Allow-Origin”字段去掉:

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:6404");
context.Response.Write(String.Format("我是站点:{0}", "http://localhost:6408"));
}

然后看一下结果:


结果果然跟之前的是一样的,这也证明了“Access-Control-Allow-Origin”在跨站点请求里面扮演的重要角色。

虽然问题解决了,但是新的问题又来了,如果我有1000个站点都要用到跨站点请求,那么我难道要把这1000个站点都加到响应头里面?所以,这肯定是不行的,那么我如何在不改动响应头的情况下实现跨站点请求呢?

前面说过,导致这个问题的直接原因是由于“浏览器限制了我们的脚本”,那么这里就有两个前提,一个是浏览器,一个是脚本,如果我们能避开其中一个,是不是就可以实现跨站点请求呢?于是我就想到了在后台代码里面直接构建Http请求代理来干掉浏览器。

由于直接使用HttpWebRequest类要配置的东西太多,而且在异步API这块写起来太繁琐,所以我使用了一个轻量但功能强大的HttpClient类来实现这一功能。

首先,我们来设计前端脚本API,为了更好的兼容性,我不打算重新写套Ajax请求的API,而是继续采用$.ajax(),只不过传递的参数不一样而已。所以,就有了下面这个脚本API:

$.ajax({
//这个url就是代理的地址,这个地址我们可以自己去web.config中配置
url: '/cors',
type: 'get',
data: {
//no是我们自定义的参数
"no": "001",
//authkey是访问代理所需要提供的授权key,这个参数是必需的
"authkey": "e4f58a805a6e1fd0f6bef58c86f9ceb3",
//target是是告诉代理,要把我们自定义的数据提交到哪个地址,这个参数是必需的
"target": "http://localhost:6408/index.ashx"
},
success: function (data) {
alert(data);
}
});

这样一来,我可以在最小改动下实现跨站点请求。

整个请求过程可以通过下图来表示:


然后再来说说 “/cors”这个地址是怎么来的,这个地址就是代理处理程序的地址,我们可以在Web.config文件里面的节点里进行配置:

 <system.webServer>
<handlers>
<add name="cors" path="/cors" allowPathInfo="true" verb="GET" type="ChuXin.Web.Cors.RequestDispatcher,ChuXin.Web"/>
</handlers>
</system.webServer>

其中,ChuXin.Web.Cors.RequestDispatcher为代理处理程序类,其核心实现代码如下:

public void Process(String target, String authkey, IReadOnlyDictionary<String,String> args = null)
{
//拼接到目标站点的请求Url
var argList = from t0 in args
select t0.Key + "=" + t0.Value;
String url = String.Format("{0}?{1}", target, String.Join("&", argList));

HttpClient hc = new HttpClient();
HttpContext context = HttpContext.Current;
Object result = null;

//使用HttpClient发起异步请求
hc.GetAsync(url, HttpCompletionOption.ResponseContentRead).ContinueWith(t =>
{
//异步请求结束后判断是否有异常或错误
if (HasExceptions<HttpResponseMessage>(t, context)) { return; }

//如果任务正常完成
if (t.IsCompleted) {
//获取响应消息对象
var respMessage = t.Result;
if (respMessage != null && respMessage.Content != null) {
//获取目标站点响应头的Content-Type属性,并赋值给当前代理的响应头
var contentTypes = respMessage.Content.Headers.GetValues("Content-Type");
context.Response.ContentType = String.Concat(contentTypes);
String contentType = null;
foreach (var ct in contentTypes) {
String[] parts = ct.Split(new Char[] { ';' }, StringSplitOptions.RemoveEmptyEntries);
if (parts.Length > 0) { contentType = parts[0].Trim(); }
}
if (contentType.StartsWith("text/")) {
//如果content-type为文本类型的,则先以异步方式读取二进制数据,
//然后转成UTF8编码字符串赋值给结果对象
respMessage.Content.ReadAsByteArrayAsync().ContinueWith(t1 =>
{
if (HasExceptions<Byte[]>(t1, context)) { return; }

if (t1.IsCompleted) {
result = Encoding.UTF8.GetString(t1.Result);
}
}).Wait();
}
else {
//如果content-type为非文本类型的,则直接以异步方式读取并赋值给结果对象
respMessage.Content.ReadAsByteArrayAsync().ContinueWith(t1 =>
{
if (HasExceptions<Byte[]>(t1, context)) { return; }

if (t1.IsCompleted) {
result = t1.Result;
}
}).Wait();
}
}
}
}).Wait();
//如果结果为字符串,则直接输出
if (result is String) {
context.Response.Write(result);
}
//如果结果为二进制数据,则写入到输出流里面
if (result is Byte[]) {
var outputStream = context.Response.OutputStream;
if (outputStream.CanWrite) {
var data = result as Byte[];
outputStream.Write(data, 0, data.Length);
}
}
}

其中,HasExceptions()方法为我自定义的一个处理任务失败的情况的方法。

我们在浏览器里面跑一下看看,得到下图结果:


从上图看出,我们设想成功实现了。我们把请求头和响应头的详细信息调出来看看:

请求头:


响应头:



跨站点Get请求数据试验成功,那么跨站点文件上传呢?

我们发现HttpClient类有Post方式的请求,例如PostAsync(String, HttpContent)方法,第一个参数还好理解,那第二个参数HttpContent是啥玩意儿呢?转到定义发现它是一个抽象类,于是乎我就想知道有哪些子类实现了它,于是打开反编译工具我们发现有下面几个类实现了它:


通过反编译工具,我们看到“FormUrlEncodedContent”类的描述为“A container for name/value tuples encoded using application/x-www-form-urlencoded MIME type.”,所以它是适用于“application/x-www-form-urlencoded”这种类型的,很明显文件不属于这种,StringContent同样不适合。然后我们再看看“MultipartFormDataContent”类,它的描述为“Provides a container for content encoded using multipart/form-data MIME type.”,眼尖的同学一定已经发现了,它就是跟我们上传文件所需的MIME类型一致的类了,所以我们就使用它来封装我们要上传的文件数据。

所以核心代码如下:

public void ProcessRequest(HttpContext context)
{
//获取目标站点地址
String target = context.Request.Unvalidated["target"];
if (String.IsNullOrWhiteSpace(target)) { return; }
target = HttpUtility.UrlDecode(target);

HttpClient client = new HttpClient();

//定义请求的边界值
String boundary = String.Format("-------ChuXinWebBoundary{0}", DateTime.Now.Ticks.ToString("x"));
//将多个文件添加到请求的主内容里面
var content = new MultipartFormDataContent(boundary);
var files = context.Request.Files;
for (Int32 i = 0; i < files.Count; i++) {
var file = files[i];
var buf = new Byte[file.InputStream.Length];
if (file.InputStream.Read(buf, 0, buf.Length) > 0) {
//创建一个二进制内容对象
var dataContent = new ByteArrayContent(buf, 0, buf.Length);
//指定该对象的Content-Type
dataContent.Headers.Add("Content-Type", file.ContentType);
//添加到请求主内容里面
content.Add(dataContent, "file" + i, file.FileName);
}
}

//将form表单数据添加的主内容对象里面
var form = context.Request.Form;
foreach (var key in form.AllKeys) {
if (String.Compare(key, "target", true) == 0) { continue; }
var data = Encoding.UTF8.GetBytes(form[key]);
var dataContent = new ByteArrayContent(data);
content.Add(dataContent, key);
}

String result = null;
//执行异步POST提交请求
client.PostAsync(target, content).ContinueWith(t0 =>
{
if (t0.IsCompleted) {
var respMessage = t0.Result;
if (respMessage != null && respMessage.Content != null) {
//请求完成后,异步读取目标站点的响应结果信息
respMessage.Content.ReadAsStringAsync().ContinueWith(t1 =>
{
if (t1.IsCompleted) {
result = t1.Result;
}
}).Wait();
}
}
}).Wait();
//获取到响应结果信息后输出
context.Response.Write(result);
client.Dispose();
}

然后我们测试一下:

首先,请求发起站点(http://localhost:6404/index.html)要得有一个form表单:

<form action="/cors" method="post" enctype="multipart/form-data">
<input name="myfile" type="file" /><br /><br />
<input name="authkey" type="hidden" value="e4f58a805a6e1fd0f6bef58c86f9ceb3" />
<input name="target" type="hidden" value="http://localhost:6408/file/upload" />
<input name="dir" type="hidden" value="~/uploaddir/" />
<input type="submit" value="提交" />
</form>

然后,在请求发起站点的web.config文件中配置代理:

<system.webServer>
<handlers>
<add name="cors" path="/cors" verb="GET,POST" type="ChuXin.Web.Cors.RequestDispatcher,ChuXin.Web"/>
</handlers>
</system.webServer>

最后选个文件提交一把,得如下结果:


这个就是我上传的图片文件地址,它已成功上传到“http://localhost:6408”这个站点的“uploaddir”目录。

参考文献
  • https://www.w3.org/TR/cors/
  • https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS