web api 解决Ajax请求跨域问题

时间:2023-11-23 10:02:26

前端ajax请求接口时,经常出现跨域问题,当然了解决方法有很多种,比如:

http://www.jb51.net/article/68424.htm

我本人恰好前后端都会一点,所以直接在接口端处理。 我用的是mvc 开发的接口 可以在web API 的根目录添加一个属性就OK了。 代码如下:

public class CrossSiteAttribute: System.Web.Http.Filters.ActionFilterAttribute

{

    private string originHeaderdefault = "http://www.abc.com";

    //默认的构造函数允许  "http://www.abc.com"域名下调用接口
public CrossSiteAttribute() { } public CrossSiteAttribute(string originHeader )
{
if (!string.IsNullOrEmpty(originHeader)) {
originHeaderdefault = originHeader;
}
} private const string Origin = "Origin";
/// <summary>
/// Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header,用来解决资源(比如字体)的跨域权限问题。
/// </summary>
private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin" ;
/// <summary>
/// originHeaderdefault的值可以使 URL 或 *,如果是 URL 则只会允许来自该 URL 的请求,* 则允许任何域的请求
/// </summary> /// <summary>
/// 该方法允许api支持跨域调用
/// </summary>
/// <param name="actionExecutedContext"> 初始化 System.Web.Http.Filters.HttpActionExecutedContext 类的新实例。</param>
public override void OnActionExecuted( HttpActionExecutedContext actionExecutedContext)
{ actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault);
}
}
### 调用很简单

    [HttpPost]
[CrossSite("http://www.bbb.com")]
public Response RemovePC(Model model)
{
//你的代码
}
### 还有一种方式 ,就是直接在web.config里添加节点 的方式解决,就是在  <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" />
</customHeaders>
</httpProtocol>

这种方式简单,没有安全性可言,所以得网站都可以访问你的接口。写死连接,灵活性有点差,又不利于拓展,建议使用上面的那种方式。