WebApi2跨域问题

一、跨域问题产生的原因：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能。

现在所有支持JavaScript 的浏览器都会使用这个策略。

所谓同源是指，域名，协议，端口相同。

当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面

当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，

即检查是否同源，只有和百度同源的脚本才会被执行。

由于同源策略的限制，JavaScript就产生了跨域的问题。

参考：同源策略

 

二、在WebApi2中的解决方法。

参考:

C#进阶系列——WebApi 跨域问题解决方案：CORS

环境：vs2013,entity framework 6.0

后端项目：webApi 2

前端项目：

提交ajax时候用的类型：application/json

1、在nuget中搜索cors，安装

2、在文件WebApiConfig.cs中配置跨域设置

3、因为前端提交ajax请求，用的类型是application/json。发送post请求前会先发送一个预请求，就是option请求。

要在Web.config中配置下处理option请求，让后端能够正确的响应option请求，前端才会继续发送post请求。

这两个处理程序会影响option请求的正确处理。

 <system.webServer>
     <handlers> <!--此处处理options请求。或去iis里面删除、添加上动作添加上OPTIONS-->
      <remove name="OPTIONSVerbHandler" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
    
  </system.webServer>

 

 

1、默认的配置：

var cors = new EnableCorsAttribute("*", "*", "*");

            config.EnableCors(cors);

这样设置可以实现简单请求的跨域，

但是非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。options请求。

触发options请求的条件：

1、非GET 、POST请求

　　2、POST请求的content-type不是常规的三个：application/x- www-form-urlencoded（使用 HTTP 的 POST 方法提交的表单）、multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）、text/plain（纯文本）

　　3、POST请求的payload为text/html

　　4、设置自定义头部

 

但是不能实现非简单请求的跨域。

还需要在web.config中<system.webServer>下添加

<handlers>

      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />

      <remove name="OPTIONSVerbHandler" />

          <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

</handlers>

 

 

注意 ：

var cors = new EnableCorsAttribute("10.116.56.69:90", "*", "*");

是不行的 ，要写http://10.116.56.69:90

注意：如果写http://localhost:90  ，那浏览器访问的时候也要访问 http://localhost:90,如果访问http://10.116.56.69:90，也是不能跨域的。