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

什么是跨域问题

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

Cors解决跨域问题

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

解决跨域问题实例

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

1、建立测试项目

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

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

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

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

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

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

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

<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>
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文件夹配置跨域

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 }
        );
    }
}

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

重新运行: 
谷歌 

IE7、IE8、IE9 
 
我都已经设置跨域了呀,怎么IE7、8、9还是不行呢?这个时候就有必要说说CORS的浏览器支持问题了。网上到处都能搜到这张图: 

可以看到IE8、9只有部分浏览器支持,那么如何解决IE浏览器支持问题呢,其实在调用处指定 jQuery.support.cors = true; 这一句就能解决IE8、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>

4、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";
    }
}

原文地址:https://www.cnblogs.com/hnsongbiao/p/9375997.html

时间: 2024-10-11 20:49:58

c# WebApi之解决跨域问题:Cors的相关文章

springboot解决跨域问题(Cors)

1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处理. 但是jsonp方式也同样有不足,不管是对于前端还是后端来说,写法与我们平常的ajax写法不同,同样后端也需要作出相应的更改.并且,jsonp方式只能通过get请求方式来传递参数,当然也还有其它的不足之处, jQuery ajax方式以jsonp类型发起跨域请求,其原理跟<script>脚本请

解决跨域问题(CORS)

一.改变响应头部 请求代码如下: fetch("http://localhost:8888/young",{ method:"get" }).then(function (resp) { resp.text().then(function(data){ console.log(data); }); }); 服务器代码(设置响应头部): 浏览器访问如下: 2.如果是用了Spring框架,可以使用更简单的注解实现跨域,该注解可以放在类上,也可以放在方法上,该可以配置允许

Web API中使用CORS解决跨域(暂存)

Web API中使用Cros解决跨域 如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,注:IE不考虑端口,同源策略不会阻止浏览器发送请求,但是它会阻止应用程序看到响应.如下图所示 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发出请求.CORS需要浏览器和服务器同时支持,目前,主流的浏览器都支持CORS,因此实现CORS通信的关键是服务器.CORS是通过目标服务器返回的Header设

一步一步学习SignalR进行实时通信_3_通过CORS解决跨域

原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 前言 关于start()的补充 跨域解决方案 JSONP CORS CORS跨域演示 结束语 参考文献 前言 这周工作比较忙,一直没有时间学习SignalR,大致希望一周能写一篇关于SignalR的文章.上一篇用Persistent Connections方式实现了个简单的在线

Django 【第二十篇】后端CORS解决跨域问题

一.为什么会有跨域问题? 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截. 二.解决跨域问题的两种方式 JSONP CORS 三.JSONP 先简单来说一下JSONP,具体详细详见上面JSONP JSONP是json用来跨域的一个东西.原理是通过script标签的跨域特性来绕过同源策略.(创建一个回调函数,然后在远程服务上调用这个函数并且将json数据形式作为参数传递,完成回调). 四.CORS跨域 随着技术的发展,现

后端CORS解决跨域问题

一 . 为什么会有跨域问题 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href 属性,a标签什么的都不拦截. 二 . 解决跨域的方法 解决跨域有两种方法 : JSONP CORS 三 . JSONP 简单说下JSONP,详细的在上一篇 JSONP时json用来跨域的一个东西,原理是通过script标签的跨域特性来绕过同源策略,(创建一个回调函数,然后在远程服务商调用这个函数并且将json数据形式作为参数传递,完成回调). 原文地址:https://

Spring Boot中通过CORS解决跨域问题

今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由Netscape提出的一个著名的安全策略,它是浏览器最核心也最基本的安全功能,现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指协议.域名以及端口要相同.同源策略是基于安全方面的考虑提出来的,这个策略本身没问题,但是我们在实际开发中,由于各种原因又经常有跨域的需求,传统的跨域方案是JSONP,

使用CORS解决跨域问题

1.什么是动静分离 "动"与"静" 在弄清动静分离之前,我们要先明白什么是动,什么是静. 在Web开发中,通常来说,动态资源其实就是指那些后台资源,而静态资源就是指Html.img.js.css等文件. 动静分离就是将动态资源和静态资源分开,将静态资源部署在Nginx上,当一个请求来的时候,如果是静态资源的请求,就直接到nginx配置的静态资源目录下面获取资源,如果是动态资源的请求,nginx利用反向代理的原理,把请求转发给后台应用去处理,从而实现动静分离. 好处

PhoneGap开发跨平台移动APP - 解决跨域资源共享

解决跨域资源共享 一.WebApi解决跨域资源共享. 开发中选择WebApi来作为服务端的数据接口,由于使用PhoneGap,就需要通过js来获取远程远程数据服务器的数据,由于同源策略的限制,这就涉及到跨域资源共享问题. 首先新建一个简单的WebApi项目, 使用微软的CORS解决方案,再Nugget中下载microsoft.aspnet.webapi.cors. 配置WebApiConfig: //这里先用*来测试,生产环境下,这样配置是不安全的,需要做一些限制.config.EnableCo