jQuery.Ajax添加带Header的前端跨域请求

SongKer 发布时间:2016-10-14 分类:.NET 阅读:12000次 1 条评论

jQuery.Ajax一般不可以跨域请求。要提供jQuery等的前端请求,一般我们可以使用jsonp等方式,或者在提供服务接口的请求上添加头标记Access-Control-Allow-Origin:*。

但是如果我们需要在前端请求中添加自定义的Header标记时候,chrome等浏览器就会提示“No 'Access-Control-Allow-Origin' header is present on the requested resource”等错误提示,并且我们的请求方式GET或者POST就会变成OPTIONS。

问题在于,IE和chrome 等浏览器对于跨域请求并要求设置Headers自定义参数时候的 "预请求", 就是如果遇到跨域并设置headers的请求,所有请求需要两步完成!

第一步:发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。options请求可在权限拦截器中处理。

拦截器代码(MVC):

public class ApiAuthorizeAttribute : AuthorizeAttribute
{
    public override void OnAuthorization(AuthorizationContext filterContext)
    {
        //添加跨域请求
        if (filterContext.HttpContext.Request.HttpMethod.ToString().ToUpper() == "OPTIONS")
        {
            filterContext.HttpContext.Response.StatusCode = (int)HttpStatusCode.Accepted;
            return;
        }
    }
}

第二步:第一步通过后浏览器就会自动的接着执行我们的真正请求。


ASP.NET需要配置web.config文件:

  <system.webServer>
    <httpProtocol>
      <!--跨域配置开始-->
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <!--支持全域名访问,不安全,部署后需要固定限制为客户端网址-->
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        <!--支持的http 动作-->
        <add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token,Auth" />
        <!--响应头 请按照自己需求添加 这里新加了token和Auth-->
        <add name="Access-Control-Request-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        <!--允许请求的http 动作-->
      </customHeaders>
      <!--跨域配置结束-->
    </httpProtocol>
  </system.webServer>


参考地址:http://www.cnblogs.com/cdemo/p/5158663.html



已有1条留言

发表评论:

◎欢迎您的参与讨论。