web api 学习记录之跨域解决方法

1. 跨域问题产生

 由于安全考虑，浏览器安全策略会阻止web页向另一个域发出AJAX请求。此限制称为相同源策略，可以防止恶意站点读取另一个站点的敏感数据。

1. Cors解决跨域问题

跨域资源共享（Cors）机制允许web应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。原理：通过http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名和请求。

1. 使用cors跨域

第一步：在WebApiCORS项目上面使用Nuget搜索“microsoft.aspnet.webapi.cors”

第二步：在App_Start文件夹下面的WebApiConfig.cs文件夹配置跨域

  //跨域配置

            config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

上文我们用的是：config.EnableCors(new EnableCorsAttribute(““, ““, “*”));，这里的*号表示只要别人知道你的url，任何请求都能返回资源，这是不安全的，所以需要进行访问控制。

配置方法：

在web.config配置

<appSettings>

  <add key="cors:allowedMethods" value="*"/>

  <add key="cors:allowedOrigin" value="http://localhost:8610"/>

  <add key="cors:allowedHeaders" value="*"/>

</appSettings>

然后在WebApiConfig.cs文件配置

public static void Register(HttpConfiguration config)

{         

    //跨域配置

    var allowedMethods = ConfigurationManager.AppSettings["cors:allowedMethods"];

    var allowedOrigin = ConfigurationManager.AppSettings["cors:allowedOrigin"];

    var allowedHeaders = ConfigurationManager.AppSettings["cors:allowedHeaders"];

    var geduCors = new EnableCorsAttribute(allowedOrigin, allowedHeaders, allowedMethods)

    {

        SupportsCredentials = true

    };

    config.EnableCors(geduCors);

坑了自己一下：value="http://localhost:8610"/>

这个值自己多写了一个斜杆http://localhost:8610/一直不行无语了

方式二

需要在（在App_Start里面的WebApiConfig.cs）添加如下配置

 config.EnableCors();一定要添加这个，才能使用EnableCorsAttribute,否则，在Contoler或者Action上面添加这个特性无效

如果你只想对某些api做跨域，可以直接在api的类上面使用特性标注即可。

地址最后面注意不要后面加/

   [EnableCors(origins: "http://localhost:62815", headers: "*", methods: "GET,POST,PUT,DELETE")]

        [HttpPost]

        public string GetStudent(List<Student> stu) {

 

 

           return stu[0].Name;

 

        }

可能会遇到的问题

Message: "请求的资源不支持 http 方法“OPTIONS”。"

1、 修改Web.config文件，在system.webServer节点下，新增如下代码

<httpProtocol>

    <customHeaders>

      <!--相应类型（值为逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法）-->

      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>

      <!--响应头设置（Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）-->

      <add name="Access-Control-Allow-Headers" value="*"/>

      <!--允许跨域访问的网址-->

      <add name="Access-Control-Allow-Origin" value="*"/>

      <!--<add name="Access-Control-Allow-Origin" value="http://www.yabyy.com,http://bbs.yabyy.com"/>-->

    </customHeaders>

  </httpProtocol>

2、 修改Global.asax，新增如下代码

  /// 跨域设置

        ///

        public void Application_BeginRequest()

        {

            //OPTIONS请求方法的主要作用：

            //1、获取服务器支持的HTTP方法；也就是黑客经常用的方法。

            //2、用来检查服务器的性能。如Ajax进行跨域请求是的预检，需要想另外一个域名的资源发送OPTIONS请求头，用以判断发送的请求是否安全

            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")

{

                //表示对输出的内容进行缓冲，执行page.Response.Flush()时，会等所有内容缓冲完毕，将内容发送到客户端

                //这样就不会出错，造成页面卡死状态，让用户无限制等下去

                Response.Flush();

            }

        }