解决WebApi及WebService跨域问题

什么是跨域问题

出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容。由于这个原因,我们不同站点之间的数据访问会被拒绝。

Cors解决跨域问题

跨域资源共享( CORS )机制允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求。

WebApi解决跨域问题实例

下面就写一个简单是实例来说明如何使用CORS解决跨域

1、建立测试项目

1.1、新建两个ASP.NET Web 应用程序,作为Web站点和WebApi站点: 

1.2、配置WebApi站点 
WebApiConfig.cs文件里面配置Web API 路由,指向具体的action

 

在控制器中新建一个测试方法,用于返回请求数据:

 

启动Web API项目,站点端口号为:8476

1.3、配置Web站点 
新建一个index测试页面:

 

jquery 的 ajax处理请求:

 

2、测试

在不做任何处理的情况下,运行Web项目,结果为: 

3、使用CORS跨域

首先安装CORS,在WebApiCors项目上面使用Nuget搜索“microsoft.aspnet.webapi.cors”,安装第一个 

 

 

当我们安装这个包之后,现有的packages目录下会添加两个名称分别为“Microsoft.AspNet.Cors.5.2.3”和“Microsoft.AspNet.WebApi.Cors.5.2.3”,针对保存其中的两个程序集(System.Web.Cors.dll和System.Web.Http.Cors.dll)的引用被自动添加到WebApiCors项目中 

然后在App_Start文件夹下面的WebApiConfig.cs文件夹配置跨域

 

我们暂定三个“*”号,当然,在项目中使用的时候一般需要指定对哪个域名可以跨域、跨域的操作有哪些等等。这个下面介绍

重新运行: 
谷歌 

 

WebService解决跨域问题

1、IIS配置

打开IIS选择发布后的webapi或者是WebService,选择网站-->选择HTTP 响应表头-->添加。。操作如下:

需要添加的名称和值为

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

<add name="Access-Control-Allow-Headers" value="x-requested-with,Content-Type"/>

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

2、直接在web.config中添加标签

<system.webServer>

  <httpProtocol>

    <customHeaders>

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

      <add name="Access-Control-Allow-Headers" value="x-requested-with,Content-Type"/>

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

    </customHeaders>

  </httpProtocol>

</system.webServer>

切记。两种方法只能采用一种,否则会报错。