ASP.NET 下，Ajax跨域访问资源

        互联网上常用的跨域(服务器访问不在同一域名下的网站)方案一般是声明权限，在此提出一个不同于传统思路的方案:服务器后台构造一个HttpWebRequest客户端获取目标网页资源后返回给用户。步骤如下:

1. 在服务器后台增加一个Action。

//访问一个互联网上的JPEG文件，并作为一个Action返回
public ActionResult Other(string url)
{
    HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest;
    //发送请求并获取相应回应数据
    HttpWebResponse response = request.GetResponse() as HttpWebResponse;
    //直到request.GetResponse()程序才开始向目标网页发送Post请求
    Stream responseStream = response.GetResponseStream();
    MemoryStream ms = new MemoryStream();
    byte[] bArr = new byte[1024];
    int size = responseStream.Read(bArr, 0, bArr.Length);
    while (size > 0)
    {
        //stream.Write(bArr, 0, size);
        ms.Write(bArr, 0, size);
        size = responseStream.Read(bArr, 0, bArr.Length);
    }
    responseStream.Close();
    return new FileContentResult(ms.ToArray(), "image/Jpeg");
}

2. 在View中使用Ajax技术异步获取上一步中的Action。

<script>
	function Ajax()
	{
	    var xmlhttp;
	
	    if (window.XMLHttpRequest)  // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	        xmlhttp = new XMLHttpRequest();
	    else                        // IE6, IE5 浏览器执行代码
	        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	
		//声明目标类型为二进制文件
	    xmlhttp.responseType = "blob";
	
	    xmlhttp.onreadystatechange = function ()
	    {
	        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
	        {
	            var blob = xmlhttp.response;
	            var img = document.createElement("img");
	            img.src = window.URL.createObjectURL(blob);
	            $('img').html(img);
	    	}
	    }
		
		//将网址作为参数传给服务器后台Other函数，并返回图片文件，在前端视角就是直接访问目标图片链接
		//Home为Other函数所在的控制器HomeController
	    xmlhttp.open("GET", "/Home/Other?url=" + "https://img-home.csdnimg.cn/images/20210105033219.jpg", true);
	    xmlhttp.send();
	}
</script>
<div style="margin-top:20px;">
    <button onclick="GetImg()">点击获取图片</button>
</div>
<p id="img"></p>

现在点击按钮就可以实现异步加载跨域图片了

 

参考链接

• AJAX 教程
• ajax请求二进制流图片并渲染到html中img标签
• C# http下载文件