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

2023-10-31

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

WebApi相关文章:

什么是跨域问题

出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求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 }
);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

[Authorize]
[RoutePrefix("api/Account")]
public class AccountController : ApiController
{
    /// <summary>
    /// 得到所有数据
    /// </summary>
    /// <returns>返回数据</returns>
    [HttpGet]
    public string GetAllData()
    {
        return "Success";
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

启动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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
public ActionResult Index()
{
    return View();
}
  • 1
  • 2
  • 3
  • 4

用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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
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 }
        );
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

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

重新运行:
谷歌
这里写图片描述

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

这里写图片描述

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>
  • 1
  • 2
  • 3
  • 4
  • 5

然后在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("*", "*", "*"));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

配置方法二
如果你只想对某一些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";
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
0 个人打赏
文章最后发布于: 2017-11-06 14:48:24

转载于:https://www.cnblogs.com/dawenxi0/p/11610967.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 使用 JNI 从 Java 代码中检索 String 值的内存泄漏

    我使用 GetStringUTFChars 从使用 JNI 的 java 代码中检索字符串的值 并使用 ReleaseStringUTFChars 释放该字符串 当代码在 JRE 1 4 上运行时 不会出现内存泄漏 但如果相同的代码在 JR
  • 在 WordPress 和 woocommerce 中禁用 zxcvbn.min.js

    如您所知 zxcvbn min js 约为 400kb 并且默认在 WordPress 网站中加载 我想知道如何阻止加载此 JavaScript 库 因为我不想在我的网站中检查密码长度 将以下内容添加到主题的 function php 或自
  • Rx 中是否有与 Task.ContinueWith 运算符等效的操作?

    Rx 中是否有与 Task ContinueWith 运算符等效的操作 我正在将 Rx 与 Silverlight 一起使用 我正在使用 FromAsyncPattern 方法进行两个 Web 服务调用 并且我想这样做同步地 var o1
  • 谷歌地图API v3如何获取所有形状的坐标

    我有这个谷歌脚本 可以创建形状和删除形状 但没有太多关于保存形状的信息 我查了一下互联网 知道我可以通过 overlaycomplete 中的 getpaths 访问路径坐标 而且我还可以将坐标推入一个收集所有形状的数组中 但是 如果用户删
  • 带有子节点的拖放区域

    我有一个带有多个子节点的拖放区域 主要元素有dropenter and dropleave事件 但是 如果您将文件拖动到主元素内部和子节点上方 则dropleave被触发 如何处理 以便dropleave仅当拖动的元素和鼠标位于主元素之外时
  • 如何使用 watin 中的 FileUploadDialogHandler 访问文件上传对话框

    我正在使用 IE8 和 watin 并尝试通过我的网页测试上传文件 我不能简单地使用 set 方法设置上传文件 例如 ie FileUpload Find ById someId Set C Desktop image jpg 因为上传文本
  • 批量更新 SQL Server C#

    我有一个 270k 行的数据库 带有主键mid和一个名为value 我有一个包含中值和值的文本文件 现在我想更新表格 以便将每个值分配给正确的中间值 我当前的方法是从 C 读取文本文件 并为我读取的每一行更新表中的一行 必须有更快的方法来做
  • 上下文敏感与歧义

    我对上下文敏感性和歧义如何相互影响感到困惑 我认为正确的是 歧义 歧义语法会导致使用左推导或右推导构建多个解析树 所有可能的语法都是二义性的语言是二义性语言 例如 C 是一种不明确的语言 因为 x y 总是可以表示两个不同的事物 如下所述
  • 将 MathJax 脚本添加到 Office 365 Sharepoint 中的页面

    我正在尝试将 Mathjax 库添加到 SharePoint 库 以便我们可以使用 LaTex 语法来添加方程 我在网上搜索时看到了多种方法 但似乎没有一种方法可以与最新版本的 MathJax 和 Office 365 版本的 ShareP
  • 如何编写一个同时需要请求和响应Dtos的ServiceStack插件

    我需要提供本地化数据服务 所有本地化的响应 Dto 都共享相同的属性 IE 我定义了一个接口 ILocalizedDto 来标记那些 Dto 在请求端 有一个ILocalizedRequest对于需要本地化的请求 Using IPlugin
  • 将新行 JSON 上传到 Elasticsearch 批量 API

    我正在尝试使用 Bulk API 将新行 JSON 上传到 Elasticsearch 我上传的批量 JSON 如下所示 每个 JSON 都占一个新行 ip x x x x seen true classification maliciou
  • HttpWebRequest 在第二次调用时超时

    为什么以下代码在第二次 及后续 运行时超时 代码挂在 using Stream objStream request GetResponse GetResponseStream 然后引发 WebException 表示请求已超时 我已经尝试过
  • 有人可以提供一个使用 Amazon Web Services 的 itemsearch 的 C# 示例吗

    我正在尝试使用 Amazon Web Services 查询艺术家和标题信息并接收回专辑封面 使用 C 我找不到任何与此接近的示例 所有在线示例都已过时 并且不适用于 AWS 的较新版本 有一个开源项目CodePlex http www c
  • Electron Auth0Lock“原始文件://不允许”

    尝试让 auth0 与我的电子应用程序一起使用 当我按照默认教程并尝试使用用户名 密码 身份验证进行身份验证时 锁定失败并显示 403 错误 并响应 不允许使用 Origin file 我还在 auth0 仪表板中客户端设置的允许来源 CO
  • gcc 的配置选项如何确定默认枚举大小(短或非短)?

    我尝试了一些 gcc 编译器来查看默认枚举大小是否很短 至少一个字节 强制使用 fshort enums 或无短 至少 4 个字节 强制使用 fno short enums user host echo Static assert 4 si
  • 验证单个单选按钮在可用的 javascript 验证脚本中不起作用

    我随机生成了单选按钮系列 例如
  • 如何防止IE11弹出(您确定要离开此页面)

    我正在处理一个页面 除了一个下拉菜单可供选择外 我无需输入任何内容 但在 IE11 中 当我尝试转到下一页时 它会弹出该消息 我想阻止这种弹出的发生 所以我只是想知道 IE11 中弹出窗口的默认行为是什么 因为它不会出现在 Chrome 或
  • 使用 GhostScript.NET 打印 PDF DPI 打印问题

    我在用GhostScript NET http ghostscriptnet codeplex com打印 PDF 当我以 96DPI 打印时 PDF 打印效果很好 但有点模糊 如果我尝试以 600DPI 打印文档 打印的页面会被极大地放大
  • 在 Javascript 中动态创建 []array

    也许这将是一个真正愚蠢的问题 但我是 JavaScript 新手 并且坚持动态创建数组 如下格式 items Date 2012 01 21T23 45 10 280Z Value 7 Date 2012 01 26T23 45 10 28
  • 如何正确使用 std::condition_variable?

    我很困惑conditions variables以及如何 安全 使用它们 在我的应用程序中 我有一个创建 gui 线程的类 但是当 gui 是由 gui 线程构造时 主线程需要等待 情况与下面的函数相同 主线程创建互斥体 锁和conditi

随机推荐

  • UEFI模式安装下Ubuntu 18.04 系统分区参考(win10+Ubuntu双系统)

    由于这几天给自己的电脑成功装了双系统 所以在此记录下当时在装Ubuntu系统中最难懂的部分 系统分区 以供大家以及自己今后参考 具体安装步骤我就不一一细说了 可以参考其他博主的文章 小米笔记本安装Win10 Ubuntu16 04 LTS
  • 金山卫士开源软件之旅(二) 简单教程:如何创建一个基于金山卫士界面库的工程

    完整解决方案代码压缩包 test full zip 267 59 KB 参考 http bbs code ijinshan com thread 1391 1 1 html 为了让更多的朋友能够让自己的程序使用上金山卫士的界面库 现将创建界
  • oracle case when的使用方法

    大家都知道Case when的用法 一旦满足了某一个WHEN 则这一条数据就会退出CASE WHEN 而不再考虑其他CASE 文章来详细的介绍了case when的用法并举例说明了 Case when 的用法 简单Case函数 简单CASE
  • C++ 接口(抽象类)

    C 接口是使用抽象类来实现的 接口描述了类的行为和功能 而不需要完成类的特定实现 且抽象类与数据抽象互不混淆 如果类中至少有一个函数被声明为纯虚函数 则这个类就是抽象类 数据抽象则是一个把实现细节与相关的接口分离开的概念 如果类中至少有一个
  • Ubuntu18.04安装ROS教程bug解决办法

    Ubuntu18 04安装ROS教程bug解决办法 写在前面 一 配置源文件bug 二 rosdep update 报错 三 安装ROS中出现bash opt ros melodic setup bash 没有那个文件或目录或者bash o
  • linux设置时间为24小时制,设置时区

    1 查看系统时间 root localhost localdomain date Thu Feb 4 14 24 18 CST 2010 时区是CST 为了彻底弄明白GMT UTC CST 我查阅了下网上的相关教程 进行整理 一般来说 UT
  • Android 应用内部存储之应用文件缓存

    前言 Android 应用内部存储之应用文件缓存的重点在最后总结 如果想快速学习 直接查看最后总结 在向手机上保存数据 一般是把数据保存在sdcard中的 大部分应用是直接在sdcard的根目录下创建一个文件夹 然后把数据保存在该文件夹中
  • 一个TCP长连接设备管理后台工程(四)---jtt808协议解析

    协议解析 从前面内容我们可以发现 808协议是一个很典型的协议格式 固定字段 变长字段 其中固定字段用来检测一个帧格式的完整性和有效性 所以一般会包含一下内容 帧头 变长字段对应的长度 校验 由于这一段的数据格式固定 目的单一 所以处理起来
  • vue/react/node项目通过eslint检查语法规范

    首先 我们打开终端 全局安装依赖 npm install g eslint 然后 以管理员身份运行项目终端 输入 eslint init 然后 这里 在初始化时会问我们想如何使用它 分别对应 仅检查语法 检查语法并发现问题 检查语法 发现问
  • 面试官:为啥索引可以让查询变快?

    您好 我是路人 更多优质文章见个人博客 http itsoku com 概述 人类存储信息的发展历程大致经历如下 由于是个人凭着自己理解总结的 因此可能不一定精确 但是毋庸置疑的是 在当代 各大公司机构部门的数据都是维护在数据库当中的 数据
  • 如何在Kubernetes中安装metrics-server以获取Node节点、Pod容器资源监控指标?

    关注 WeiyiGeek 公众号 设为 特别关注 每天带你玩转网络安全运维 应用开发 物联网IOT学习 本章目录 Kubernetes中安装metrics server以获取客户端资源监控指标 原文地址 https blog weiyige
  • 系统分析师笔记

    信息系统生命周期 1 立项阶段 企业全局 形成概念 需求分析 2 开发阶段 系统规划 系统分析 系统设计 系统实施 系统验收 3 运维阶段 通过验收和移交之后 4 消亡阶段 更新改造 功能扩展 报废重建 1 系统规划 初步调查 分析系统目标
  • bash设置成vim命令模式

    如果你习惯在vim下编辑文件或者写代码 那么对Vim命令肯定很熟悉 自然希望在bash输入命令的时候也能够使用这些命令 使得shell命令输入也便利起来 默认情况下 bash是Emacs模式的 在 bashrc里面添加一个设置 set o
  • python的name属性_Python中__name__属性的妙用

    在Python中 每一个module文件都有一个built in属性 name 这个 name 有如下特点 1 如果这个module文件是被别的文件导入的 那么 该 name 属性的值就是这个module文件的名字 2 如果这个module
  • elastic-job开源框架使用中遇到的 架包冲突错误

    最近在运行部门一个新的框架 该框架是用maven管理jar包的聚合工程 在进行运行elastic job相关的一个子项目时 报了如下的错误 Exception in thread main org springframework beans
  • 使用Django开发一个简易的留言板

    Django在线留言板demo 环境 ubuntu16 04 python3 django1 11 1 创建项目 django admin py startproject message 进入项目message 2 创建APP python
  • 伪代码和流程图

    一 逻辑是写代码的基础 逻辑是什么 三段论 命题一 JS中所有函数都是由function构造的 命题二 Function Object Array 推论 Function Object Array是由Function构造的 二 用三种语句表
  • Keras LSTM层return_sequences参数的坑

    具体用法我就不赘述了 可以参考中文文档https keras io zh layers recurrent lstm 我主要记录一下坑 网络结构如下 model Sequential model add Embedding 257 150
  • Windows安装PyTorch并配置pycharm

    Windows安装PyTorch并配置pycharm 安装PyTorch 1 下载Anaconda并安装 https www anaconda com 2 打开Anacnda Prompt创建分区并安装pytorch 创建分区并激活 con
  • 【转】c# WebApi之解决跨域问题:Cors

    c WebApi之解决跨域问题 Cors 版权声明 本文为博主原创文章 遵循 CC 4 0 BY SA 版权协议 转载请附上原文出处链接和本声明 本文链接 https blog csdn net lwpoor123 article deta