zoukankan      html  css  js  c++  java

  • WebAPI 15 CORS

    WebAPI 15 CORS

    同源策略

    首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

    对于同源必须要求URL在如下几个方面相同:

    1. 网络协议(http与https不同)
    2. 域名
    3. 端口(80与8080不同)

    JSONP

    JSONP是跨域访问的一种方法。在web开发中我们经常会引用第三方的js文件，这个时候我们会发现浏览器并没有拦截。JSONP就是利用向网页中添加script标签的方式去进行跨域访问。

    一般处理在处理JSONP的时候会将回调函数名与参数作为QueryString传给服务端，服务端再根据上传的函数名生成js回传给客户端。

    由于采用的是添加script标签的方式，所以JSONP只能通过GET方法访问服务器。另外由于服务端要根据上传的函数名生成js，所以JSONP方法得到的并不是数据，而是方法的调用。

    在Demo中我写了一个JSONP的服务端生成与客户端调用方法。

    CORS

    对于CORSAccess-Control-Allow-Origin

    引用System.Web.Http.Cors库

    通过NuGet管理添加System.Web.Http.Cors,我引用的库名为:Microsoft ASP.NET Web API 2.2 Cross-Origin Support

    引用库后，首先在WebApiConfig.Register方法中首行，添加一句 config.EnableCors()（记得一定要添加到首行。开始我也是添加在末行，但一直运行不成功，花了好半天功夫，才找到是这个问题。这个以后有时间再看看Cors内部的实现原理，按说不应该出现这样的问题。）。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    public static void Register(HttpConfiguration config)
     
     {
     
    // Web API 配置和服务
     
    config.EnableCors();
     
    // Web API 路由
     
    config.MapHttpAttributeRoutes();
     
      
     
     config.Routes.MapHttpRoute(
     
     name: "DefaultApi",
     
     routeTemplate: "api/{controller}/{action}/{id}",
     
     defaults: new { id = RouteParameter.Optional }
     
    );
     
     }

    System.Web.Http.Cors库对于Cors控制也是通过特性(Attribute)来实现的。System.Web.Http.Cors库提供了两个与Cors的特性：EnableCorsAttribute与DisableCorsAttribute，这两个特性都是基于Controller与Action的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = false)]
     
    public sealed class DisableCorsAttribute : Attribute, ICorsPolicyProvider
     
     {
     
    public DisableCorsAttribute();
     
    public Task<System.Web.Cors.CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken);
     
     }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = false)]
     
    public sealed class EnableCorsAttribute : Attribute, ICorsPolicyProvider
     
     {
     
    public EnableCorsAttribute(string origins, string headers, string methods);
     
    public EnableCorsAttribute(string origins, string headers, string methods, string exposedHeaders);
     
    public IList<string> ExposedHeaders { get; }
     
    public IList<string> Headers { get; }
     
    public IList<string> Methods { get; }
     
    public IList<string> Origins { get; }
     
    public long PreflightMaxAge { get; set; }
     
    public bool SupportsCredentials { get; set; }
     
      
     
    public Task<System.Web.Cors.CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken);
     
     }

    EnableCorsAttribute与DisableCorsAttribute都实现了ICorsPolicyProvider接口。但 DisableCorsAttribute没有别的属性与构造函数，它的使用场景大致为当Controller已经被添加EnableCorsAttribute后，为个别不做Cors的Action禁用掉。

    EnableCorsAttribute的与响应头部信息相对应,其对应关系如下：

    属性

    头部信息

    备注

    Origins

    Allow-Control-Allow-Origin

    CORS允许的请求域名，用逗号（，）去区他不同的域名，如：http://localhost:64299,http://www.baidu.com。

    对于没有域名，可以用星号（*）

    Methods

    Allow-Control-Allow-Method

    CORS允许的请求方法，用法同Origins

    Headers

    Allow-Control-Allow-Headers

    		  

    ExposedHeaders

    Allow-Control-Expose-Header

    		  

    PreflightMaxAge

    Allow-Control-Max-Age

    		  

    SupportsCredentials

    Allow-Control-Allow-Credentials

    		  

    还是IE

    在测试过程中我发现在火狐上能够正常运行,但到了IE是就不行了,经过一番查找,发现要在要添加一句话：

    jQuery.support.cors = true;

    但加了这句话后，虽然/api/demo/GetFigureByCors可以调的,但/api/demo/GetFigureNoCors也可以调用了。到这又郁闷了，这又是要搞那样。又经过一番折腾，才发现这个时候jQuery并不是用的XMLHttpRequest,而是采用的IE自带的XDomainRequest组件,并且该组件只支持IE8及以上。

    关于Demo

    在Demo中出于对同源的规则的考虑，我定义了两个Web项目：API_15与API_15.Web。API_15中的DemoController分别定义的三个方法GetFigureByJsonP，GetFigureNoCors，GetFigureByCors分别用于JSONP，非Cors，Cors调用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    public class DemoController : ApiController
     
     {
     
    public HttpResponseMessage GetFigureByJsonP(string callback)
     
     {
     
    StringBuilder result = new StringBuilder();
     
      
     
     result.Append("callback(");
     
     result.Append(JsonConvert.SerializeObject(FigureManager.Figures));
     
     result.Append(")");
     
    return new HttpResponseMessage(HttpStatusCode.OK) { Content = new StringContent(result.ToString()) };
     
     }
     
      
     
    public IEnumerable<Figure> GetFigureNoCors()
     
     {
     
    return FigureManager.Figures;
     
     }
     
      
     
    //[EnableCors(origins:"*",headers: "*",methods:"*")]
     
     [EnableCors(origins: "http://localhost:64299,http://www.baidu.com", headers: "GET,POST", methods: "*")]
     
    public IEnumerable<Figure> GetFigureByCors()
     
     {
     
    return FigureManager.Figures;
     
     }
     
     }

    在API_15.Web项目中只定义了一个页面，通过jQuery的AJAX去调用API_15中三个Action。

    源码

       

    Github: https://github.com/BarlowDu/WebAPI(API_15，API_15.Web)
  • 相关阅读:
    Android中内容观察者的使用 ContentObserver类详解 （转）
    Spinner
    对话框
    ButtonBar 的使用
    EditText/RadioButton/CheckBox使用
    ListView
    PieChar,此代码参考网上
    ComboBox中使用事件
    ColorPicker
    Button
  • 原文地址：https://www.cnblogs.com/Leo_wl/p/5036064.html
Copyright © 2011-2022 走看看