ASP.NET MVC 5中用jQuery加载外部URL到Div失败问题咨询

嘿，这个问题我太熟了！你碰到的是**跨域资源共享（CORS）**的限制——浏览器出于安全考虑，不允许前端脚本直接请求其他域名的资源，除非目标服务器明确给你的域名开了绿灯。你看到的No 'Access-Control-Allow-Origin'错误，就是说artisteer.com的服务器没有在响应头里添加允许你域名访问的规则，所以浏览器直接把请求拦下来了。

那怎么解决呢？前端直接绕是绕不开的，咱们得用ASP.NET MVC的后端做个“代理”，让后端去请求外部网站，再把内容返回给前端——因为浏览器的同源策略只限制前端脚本，后端请求不受这个限制。

1. 在MVC控制器里加一个代理Action #

找个你常用的控制器（比如HomeController），添加下面这个方法，用来帮你转发请求：

public async Task<ContentResult> ProxyExternalUrl(string url)
{
    using (var httpClient = new HttpClient())
    {
        try
        {
            // 先验证请求的域名，避免被滥用（可选但推荐）
            var allowedDomains = new List<string> { "http://www.artisteer.com" };
            if (!allowedDomains.Any(domain => url.StartsWith(domain)))
            {
                return Content("抱歉，不允许访问该域名", "text/plain");
            }

            // 后端请求外部URL
            var response = await httpClient.GetAsync(url);
            response.EnsureSuccessStatusCode(); // 请求失败时抛出异常
            var content = await response.Content.ReadAsStringAsync();
            
            // 返回获取到的HTML内容
            return Content(content, "text/html");
        }
        catch (Exception ex)
        {
            return Content($"请求出错啦：{ex.Message}", "text/plain");
        }
    }
}

2. 修改你的jQuery代码 #

把原来直接请求外部URL的代码，改成调用咱们自己的代理接口：

$('#btnOne').click(function() {
    // 调用本地代理Action，传递要加载的外部URL
    $('#DivOne').load('/Home/ProxyExternalUrl?url=http://www.artisteer.com');
});

额外提醒 #

• 外部网站的HTML里可能有很多相对路径的资源（比如CSS、图片、JS），加载到你的页面后可能显示不正常，因为这些路径是相对于原网站的。如果要完美解决，你得在后端把这些相对路径替换成原网站的绝对路径。
• 一定要给代理Action加域名白名单限制，不然随便传个URL就能用你的服务器去请求别的网站，容易引发安全问题或者资源滥用。

内容的提问来源于stack exchange，提问作者Pearl