Cors

跨域

• 是什么导致跨域问题?

  浏览器的同源策略导致了跨域的问题

  同源策略:如果两个URL的protocol、port(如果有指定的话)和host都想同的URL叫做同源。浏览器限制了从同一个源加载的文档和脚本如何与其他源进行交互，意在隔离潜在威胁。

• 如何允许跨域访问

  可以使用 CORS 来允许跨源访问。CORS 是 HTTP 的一部分，它允许服务端来指定哪些主机可以从这个服务端加载资源。

  CORS（跨资源共享）:是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

• .Net WebApi中允许跨域访问的两种方法

  • 使用微软提供的 Microsoft.AspNet.WebApi.Cors 程序包

  	//我们需要在WebApiConfig中配置WebApi启用跨域访问
  public static class WebApiConfig
  {
      public static void Register(HttpConfiguration config)
      {
          //进行cors配置
          //开启WebApi的跨源访问
          config.EnableCors();
          // Web API 配置和服务
  
          // Web API 路由
          config.MapHttpAttributeRoutes();
  
          config.Routes.MapHttpRoute(
              name: "DefaultApi",
              routeTemplate: "api/{controller}/{id}",
              defaults: new { id = RouteParameter.Optional }
          );
      }
  }
  

  //什么样的跨院请求此controller可以进入
  [EnableCors(origins:"*",headers:"*",methods:"*")]
  public class ValuesController : ApiController
  {
      public string GetRes()
      {
          //var response = Request.CreateResponse(HttpStatusCode.OK,"hello");
          //response.Headers.Add("Access-Control-Allow-Origin", "*");
          //return response;
          return "asdasd";
      }
  }
  

  • 使用Http头，允许跨域访问

  CORS的一般机制是，当javascript尝试进行跨域Ajax调用时，浏览器会通过HTTP请求中发送标头(如:"Origin")来"询问"服务器是否允许进行这样的调用。服务器通过在响应中返回HTTP标头(如"Access-Control-Allow-Origin")来指明允许的操作。

  CORS还可以让服务器指明允许的HTTP方法、客户端可以发送的HTTP请求标头等

  权限/功能	请求标头	响应标头
  域	域	Access-Control-Allow-Origin
  HTTP 方法	Access-Control-Request-Method	Access-Control-Allow-Method
  请求标头	Access-Control-Request-Headers	Access-Control-Allow-Headers
  响应标头		Access-Control-Expose-Headers
  凭据		Access-Control-Allow-Credentials
  缓存预检响应		Access-Control-Max-Age

  public class ValuesController : ApiController
  {
      public HttpResponseMessage GetRes()
      {
          //此时的数据我们必须手动放在Response报文中了(内容中)
          var response = Request.CreateResponse(HttpStatusCode.OK, "hello");
          //Access-Control-Allow-Origin指定了该响应的资源是否被允许与给定的origin共享。
          //* 表示所有
          response.Headers.Add("Access-Control-Allow-Origin", "*");
          return response;
      }
  }