c# WebApi之解决跨域问题：Cors

时间 2019-11-08

标签 c# webapi 解决问题 cors 栏目 C# 繁體版

原文原文链接

什么是跨域问题

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

Cors解决跨域问题

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

解决跨域问题实例

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

一、创建测试项目

1.一、新建两个ASP.NET Web 应用程序，做为Web站点和WebApi站点：
jquery

1.二、配置WebApi站点
在WebApiConfig.cs文件里面配置Web API 路由，指向具体的actionweb

//Web API 路由
config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi1", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } );

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

[Authorize]
[RoutePrefix("api/Account")] public class AccountController : ApiController { /// <summary> /// 获得全部数据 /// </summary> /// <returns>返回数据</returns> [HttpGet] public string GetAllData() { return "Success"; } }

启动Web API项目，站点端口号为：8476json

1.三、配置Web站点
新建一个index测试页面：api

<html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.min.js"></script> </head> <body> 测试结果： <div id="div_test"> hello world </div> </body> </html>

public ActionResult Index() { return View(); }

用jquery 的 ajax处理请求：跨域

<script> var ApiUrl = "http://localhost:8476/"; $(function () { $.ajax({ type: "get", dataType:"json", url: ApiUrl + "api/Account/GetAllData", data: {}, success: function (data, status) { if (data == "success") { $("#div_test").html(data); } }, error: function (e) { $("#div_test").html("Error"); }, complete: function () { } }); }); </script>

二、测试

在不作任何处理的状况下，运行Web项目，结果为：
浏览器

能够看到浏览器拒绝了咱们的跨域访问。

三、使用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文件夹配置跨域

public static class WebApiConfig { public static void Register(HttpConfiguration config) { //跨域配置 config.EnableCors(new EnableCorsAttribute("*", "*", "*")); // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi1", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); } }

咱们暂定三个“*”号，固然，在项目中使用的时候通常须要指定对哪一个域名能够跨域、跨域的操做有哪些等等。这个下面介绍

从新运行：
谷歌

IE七、IE八、IE9

我都已经设置跨域了呀，怎么IE七、八、9仍是不行呢？这个时候就有必要说说CORS的浏览器支持问题了。网上处处都能搜到这张图：

能够看到IE八、9只有部分浏览器支持，那么如何解决IE浏览器支持问题呢，其实在调用处指定 jQuery.support.cors = true; 这一句就能解决IE八、9的问题了：

<script> jQuery.support.cors = true; var ApiUrl = "http://localhost:8476/"; $(function () { $.ajax({ type: "get", url: ApiUrl + "api/Account/GetAllData", data: {}, success: function (data, status) { if (status == "success") { $("#div_test").html(data); } }, error: function (e) { $("#div_test").html("Error"); }, complete: function () { } }); }); </script>

四、CORS的具体参数设置。

上文咱们用的是：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); //config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

配置方法二
若是你只想对某一些api作跨域，能够直接在API的类上面使用特性标注便可。

[EnableCors(origins: "http://localhost:8610/", headers: "*", methods: "GET,POST,PUT,DELETE")] public class AccountController : ApiController { /// <summary> /// 获得全部数据 /// </summary> /// <returns>返回数据</returns> [HttpGet] public string GetAllData() { return "Success"; } }