Restful APIASP.NET MVC

CORS Via Web API 2

2017-03-31  本文已影响49人  程序员长春

前言

什么是CORS,看起来怎么有点像CQRS?
CORS是Cross-Origin Resource Sharing(跨域资源共享)的简称,简称的主要目的是为了显得高大上同时让人迷惑不解。
具体定义和介绍可以看 W3C的文档
CQRS的全称是Command Query Responsibility Seperation(命令查询职责分离),与本文无关。

介绍

CORS 是W3C(World Wide Web Consortium 万维网联盟,请注意不是复仇者联盟) 的一个规范,目的在于让JavaScript克服浏览器强加的同源策略安全限制。 同源策略意味着您的JavaScript只能使AJAX回调到包含网页的相同原点(其中“origin”被定义为主机名,协议和端口号的组合)。 例如,来自 http://localhost 的Web页面上的JavaScript不能将AJAX调用到 http://wwww.micorosoft.com (或 http://www.localhost:8086 )上的资源。

** 简单的说,就是W3C先把你的手绑起来,然后再想个法子开个后门给你松松绑,就这样。这都是他们整出来黑我大代码党的幺蛾子。**

CORS通过让服务器标注哪些资源允许被跨域调用,来放宽这个限制。 CORS由浏览器执行,但必须在服务器上实现,最新版本的ASP.NET Web API 2具有完整的CORS支持。 使用Web API 2,您可以配置策略以允许来自不同来源的JavaScript客户端访问您的API。

更详细的中文资料可以看 这儿

正文

首先,假设你知道怎么使用C#编写WebAPI,如果不懂,可以看看 十分钟快速实现WebAPI
其次,假设你知道怎么使用Postman, 懂得写前端页面,或者懂得写ASP.NET MVC,总之,你懂得写一点点JS代码。 不懂的话,可以先看看 Vue.JS 单页应用 - 联系人管理(一) 这个系列,洗洗脑先。
如果你两个都不懂,我比较好奇你是怎么点进来的?!
你前后端都懂了,我就随便说些有的没的。

  1. XMLHttpRequest cannot load XXXX. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
    这个错误通常是因为你直接使用文件管理器打开的HTML文件,而FILE协议默认并不在支持中。只要你通过HTTP协议访问就可以避免这个问题了。
    如果你确实想,非常想本地也能,咋办呢,还是有办法的...
    ** 给浏览器传入启动参数(allow-file-access-from-files),允许跨域访问。**
    Windows下,运行(CMD+R)或建立快捷方式:
    "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
  2. Origin xxxx is not allowed by Access-Control-Allow-Origin
    错误看起来像下图,
    不允许域xxxx的请求
    这个错误,说的是你发出请求的域,没有在服务器允许的范围之内。解决方法是修改web.config,找到这样的地方,没有就添加,有的话,就看看有啥不同,简单的说就是找不同,大家来找茬。
<system.webServer>
    <httpProtocol>
        <customHeaders>
            <!-- Adding the following custom HttpHeader 
                 will help prevent CORS from stopping the Request-->
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

入门的时候,你就这样写,反正死不了,高手的话,反正也不需要我说,应该知道,哪儿该花点心思。

  1. 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, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

可以根据需要,调整自己允许的Origin, Headers以及Mothods。

  1. EnableCorsAttribute **
    EnableCorsAttribute 类用于配置CORS策略,接受三个或四个参数,这些参数分别为:
    ** 允许的域列表 **
    ** 允许的请求头列表

    ** 允许的请求方法列表**
    允许的响应头列表(可选)
    代码看起来像下面这样
public class ResourcesController : ApiController
{
  [EnableCors("http://localhost:55912", // Origin
              null,                     // Request headers
              "GET",                    // HTTP methods
              "bar",                    // Response headers
              SupportsCredentials=true  // Allow credentials
  )]
  public HttpResponseMessage Get(int id)
  {
    var resp = Request.CreateResponse(HttpStatusCode.NoContent);
    resp.Headers.Add("bar", "a bar value");
    return resp;
  }
  [EnableCors("http://localhost:55912",       // Origin
              "Accept, Origin, Content-Type", // Request headers
              "PUT",                          // HTTP methods
              PreflightMaxAge=600             // Preflight cache duration
  )]
  public HttpResponseMessage Put(Resource data)
  {
    return Request.CreateResponse(HttpStatusCode.OK, data);
  }
  [EnableCors("http://localhost:55912",       // Origin
              "Accept, Origin, Content-Type", // Request headers
              "POST",                         // HTTP methods
              PreflightMaxAge=600             // Preflight cache duration
  )]
  public HttpResponseMessage Post(Resource data)
  {
    return Request.CreateResponse(HttpStatusCode.OK, data);
  }
}
上一篇下一篇

猜你喜欢

热点阅读