在ASP.NET MVC和Web API开发中，跨域请求是一个常见的问题，跨域资源共享（CORS）机制允许不同域名之间进行资源访问，但浏览器会基于同源策略限制这种访问，开发者需要配置服务器以允许特定的跨域请求，本文将详细介绍如何在ASP.NET MVC Web API项目中实现跨域设置。
一、什么是跨域请求
跨域请求是指浏览器向不同于其自身域名的服务器发送HTTP请求，为了安全考虑，浏览器默认会阻止这种请求，除非服务器明确告知浏览器允许该请求，这就是所谓的“同源策略”，通过在服务器端设置适当的响应头信息，可以让浏览器知道哪些域被允许进行跨域访问。
二、跨域问题解决原理
CORS全称Cross-Origin Resource Sharing，中文全称跨域资源共享，它解决跨域问题的原理是通过http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求，向响应报文里面增加Access-Control-Allow-Origin: http://localhost:8081，就表示支持http://localhost:8081里面的所有请求访问系统资源，其他更多的应用就不一一列举。
三、解决方案
针对ASP.NET MVC和ASP.NET Web API，有两种主要的解决方案：
1、使用NuGet扩展包：如Microsoft.AspNet.WebApi.Cors，这是最简单高效的方式。
2、手动配置HTTP响应头：通过修改web.config文件或在代码中添加过滤器来实现。
四、详细解决方案
方案一：使用NuGet扩展包 Microsoft.AspNet.WebApi.Cors
1、安装NuGet包：
打开Visual Studio的“工具”->“NuGet包管理器”->“管理解决方案的NuGet程序包”，搜索并安装Microsoft.AspNet.WebApi.Cors。
2、配置跨域条件：
修改App_Start/WebApiConfig.cs文件，添加跨域设置。
using System.Web.Http;
namespace YourNamespace
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API 配置和服务
// 添加跨域设置
config.EnableCors();
// Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}
这种方式未对跨域做任何限制，如果追求更高的安全性，可以指定具体的域名。
3、高级设置：
如果需要更细粒度的控制，可以在控制器或方法级别应用CORS属性。
[EnableCors(origins: "http://example.com", headers: "*", methods: "GET")]
public IHttpActionResult Get() { return Ok(); }
方案二：手动配置HTTP响应头
1、修改web.config文件：
在<system.webServer>节点下添加<httpProtocol>节点，并在其中添加自定义头信息。
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
</system.webServer>
2、在代码中添加过滤器：
创建一个自定义过滤器类，继承自ActionFilterAttribute，并在OnActionExecuted方法中添加跨域头信息。
public class CrossSiteAttribute : ActionFilterAttribute
{
private const string Origin = "Origin";
private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin";
private string originHeaderdefault = "*"; // 或者指定具体的域名
public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
{
if (actionExecutedContext.Request.Headers.Contains(Origin))
{
actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault);
}
base.OnActionExecuted(actionExecutedContext);
}
}
3、注册过滤器：
在WebApiConfig.cs文件中注册该过滤器。
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Filters.Add(new CrossSiteAttribute());
// 其他配置...
}
}
五、测试跨域访问
完成上述配置后，可以通过JavaScript发起跨域请求来测试是否成功，以下是一个简单的jQuery示例：
<!DOCTYPE html>
<html>
<head>
<title>跨域测试</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: "http://localhost:5000/api/values", // 替换为实际的API地址
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (xhr, status, error) {
console.error("Error: " + xhr.responseText);
}
});
});
</script>
</head>
<body>
<h1>跨域请求测试</h1>
</body>
</html>
如果在浏览器控制台中看到返回的数据，则说明跨域设置成功；如果报错，则需要检查配置是否正确。
本文介绍了两种主要的ASP.NET MVC Web API跨域解决方案：使用NuGet扩展包和手动配置HTTP响应头，前者更为简单高效，适合大多数场景；后者则提供了更高的灵活性和控制权，适用于需要精细控制的情况，无论采用哪种方式，都需要确保服务器正确设置了允许跨域访问的响应头。
常见问题解答
Q1: 为什么使用了CORS设置后仍然无法跨域访问？
A1: 确保CORS设置正确无误，并且客户端请求的URL与服务器配置中的允许来源匹配，检查是否有其他中间件或代理服务器影响了请求，如果问题依然存在，可以尝试在浏览器开发者工具中查看网络请求的具体错误信息，以便进一步排查。
Q2: 如何指定多个域名进行跨域访问？
A2: 在配置CORS时，可以通过逗号分隔的方式指定多个域名，在web.config中可以这样设置：
<add name="Access-Control-Allow-Origin" value="http://example1.com, http://example2.com" />
或者在代码中使用字符串数组：
config.EnableCors(new EnableCorsAttribute("http://example1.com,http://example2.com", "*", "*"));
这样就可以允许来自example1.com和example2.com的跨域请求，需要注意的是，不同的浏览器对CORS的支持可能存在差异，因此在实际应用中需要进行充分测试。
以上内容就是解答有关“asp.net mvc web api 跨域”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。