自己并不懂，在此先记录下来，留待以后学习...

正文

前言：上篇总结了下WebApi的接口测试工具的使用，这篇接着来看看WebAPI的另一个常见问题：跨域问题。本篇主要从实例的角度分享下CORS解决跨域问题一些细节。

WebApi系列文章

一、跨域问题的由来

同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaScript或Cookie只能访问同域下的内容。

正是由于这个原因，我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景：WebApi作为数据服务层，它是一个单独的项目，我们的MVC项目作为Web的显示层，这个时候我们的MVC里面就需要调用WebApi里面的接口取数据展现在页面上。因为我们的WebApi和MVC是两个不同的项目，所以运行起来之后就存在上面说的跨域的问题。

二、跨域问题解决原理

CORS全称Cross-Origin Resource Sharing，中文全称跨域资源共享。它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求。比如我们向响应报文里面增加这个Access-Control-Allow-Origin:http://localhost:8081，就表示支持http://localhost:8081里面的所有请求访问系统资源。其他更多的应用我们就不一一列举，可以去网上找找。

三、跨域问题解决细节

下面我就结合一个简单的实例来说明下如何使用CORS解决WebApi的跨域问题。

1、场景描述

我们新建两个项目，一个WebApi项目（下图中WebApiCORS），一个MVC项目（下图中Web）。WebApi项目负责提供接口服务，MVC项目负责页面呈现。如下：

其中，Web与WebApiCORS端口号分别为“27239”和“27221”。Web项目需要从WebApiCORSS项目里面取数据，很显然，两个项目端口不同，所以并不同源，如果使用常规的调用方法肯定存在一个跨域的问题。

简单介绍下测试代码，Web里面有一个HomeController

 　　public class HomeController : Controller

    {

        // GET: Home

        public ActionResult Index()

        {

            return View();

        }

    }

对应的Index.cshtml

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script src="~/Content/jquery-1.9.1.js"></script>

    <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />

    <script src="~/Content/bootstrap/js/bootstrap.js"></script>

    <script src="~/Scripts/Home/Index.js"></script>

</head>

<body>

    测试结果：<div id="div_test"> 

    </div>

</body>

</html>

Index.js文件

var ApiUrl = "http://localhost:27221/";

$(function () {

    $.ajax({

        type: "get",

        url: ApiUrl + "api/Charging/GetAllChargingData",

        data: {},

        success: function (data, status) {

            if (status == "success") {

                $("#div_test").html(data);

            }

        },

        error: function (e) {

            $("#div_test").html("Error");

        },

        complete: function () {

        }

    });

});

WebApiCORS项目里面有一个测试的WebApi服务ChargingController

　　public class ChargingController : ApiController

    {

        /// <summary>

        /// 得到所有数据

        /// </summary>

        /// <returns>返回数据</returns>

        [HttpGet]

        public string GetAllChargingData()

        {

            return "Success";

        }

    }

配置WebApi的路由规则为通过action调用。WebApiConfig.cs文件

　　 public static class WebApiConfig

    {

        public static void Register(HttpConfiguration config)

        {

            // Web API 路由

            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(

                name: "DefaultApi",

                routeTemplate: "api/{controller}/{action}/{id}",

                defaults: new { id = RouteParameter.Optional }

            );

        }

    }

2、场景测试

1）我们不做任何的处理，直接将两个项目运行起来。看效果如何

IE浏览器：

谷歌浏览器：

这个结果另博主也很吃惊，不做任何跨域处理，IE10、IE11竟然可以直接请求数据成功，而同样的代码IE8、IE9、谷歌浏览器却不能跨域访问。此原因有待查找，应该是微软动了什么手脚。

2）使用CORS跨域

首先介绍下CORS如何使用，在WebApiCORS项目上面使用Nuget搜索“microsoft.aspnet.webapi.cors”，安装第一个

然后在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: "DefaultApi",

                routeTemplate: "api/{controller}/{action}/{id}",

                defaults: new { id = RouteParameter.Optional }

            );

        }

    }

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

IE10、IE11

谷歌浏览器

IE8、IE9

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

上图描述了CORS的浏览器支持情况，可以看到IE8、9是部分支持的。网上说的解决方案都是Internet Explorer 8 、9使用 XDomainRequest 对象实现CORS。是不是有这么复杂？于是博主各种百度寻找解决方案。最后发现在调用处指定 jQuery.support.cors = true; 这一句就能解决IE8、9的问题了。具体是在Index.js里面

jQuery.support.cors = true;

var ApiUrl = "http://localhost:27221/";

$(function () {

    $.ajax({

        type: "get",

        url: ApiUrl + "api/Charging/GetAllChargingData",

        data: {},

        success: function (data, status) {

            if (status == "success") {

                $("#div_test").html(data);

            }

        },

        error: function (e) {

            $("#div_test").html("Error");

        },

        complete: function () {

        }

    });

});

这句话的意思就是指定浏览器支持跨域。原来IE9以上版本的浏览器、谷歌、火狐等都默认支持跨域，而IE8、9却默认不支持跨域，需要我们指定一下。你可以在你的浏览器里面打印jQuery.support.cors看看。这样设置之后是否能解决问题呢？我们来看效果：

问题完美解决。至于网上说的CORS对IE8、9的解决方案XDomainRequest是怎么回事，有待实例验证。

3）CORS的具体参数设置。

上文我们使用

config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

这一句解决了跨域问题，上面说了，这种*号是不安全的。因为它表示只要别人知道了你的请求url，任何请求都可以访问到你的资源。这是相当危险的。所以需要我们做一些配置，限制访问权限。比如我们比较常见的做法如下：

配置方法一、在Web.Config里面（PS：这两张图源自：http://www.cnblogs.com/moretry/p/4154479.html）

然后在WebApiConfig.cs文件的Register方法里面

配置方法二、如果你只想对某一些api做跨域，可以直接在API的类上面使用特性标注即可。

　　[EnableCors(origins: "http://localhost:8081/", headers: "*", methods: "GET,POST,PUT,DELETE")]

    public class ChargingController : ApiController

    {

        /// <summary>

        /// 得到所有数据

        /// </summary>

        /// <returns>返回数据</returns>

        [HttpGet]

        public string GetAllChargingData()

        {

            return "Success";

        }

    }

四、总结

以上就是一个简单的CORS解决WebApi跨域问题的实例，由于博主使用WebApi的时间并不长，所以很多理论观点未必成熟，如果有说的不对的，欢迎指出。博主在此多谢啦。

原文地址：http://www.cnblogs.com/landeanfen/p/5177176.html

跨域学习笔记2--WebApi 跨域问题解决方案：CORS的更多相关文章

  1. 学习笔记：AJAX 跨域问题

    学习笔记:AJAX 跨域问题 AJAX 跨域是浏览器的问题. 只要 xhr 请求,不同的域名就会出现 AJAX 跨域问题. JSONP 是一要简单方式,但是有很多弊端,需要修改服务端代码. JSONP ...

  2. Web前端学习笔记之前端跨域知识总结

    0x00 前言 相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的.但跨域方法的多种多样实在让人目不暇接.老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录. 0x01 什 ...

  3. 建立 Active Directory域 ----学习笔记

    第五章 建立 Active Directory域 1.工作组和域的理解 ​ a.工作组是一种平等身份环境,各个计算机之间各个为一个独立体,不方便管理和资源共享. ​ b.域环境一般情况下满足两类需求, ...

  4. 跨域学习笔记1--跨域调用webapi

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...

  5. 跨域学习笔记3--web.config设置之system.webServer 详细介绍，为网站设置默认文档

    自己并不懂,在此先记录下来,留待以后学习... 如何:为 IIS 7.0 配置 <system.webServer> 节2008-06-14 22:26http://technet.mic ...

  6. 虚拟化学习笔记-KVM虚拟化跨机迁移原理

    参考:https://zhuanlan.zhihu.com/p/27055555 在线迁移过程划分为三个阶段:准备阶段.迁移阶段和切换阶段.迁移环境为虚拟化底层KVM+Qemu.虚拟化管理Libvir ...

  7. jQuery学习笔记(5)--表单域获得焦点和失去焦点样式变化

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  8. ES6学习笔记（十二）异步解决方案Promise

    1.Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了P ...

  9. VC++ 学习笔记（序）：神一样的语言

    总的来说,我觉得VC++是一门神一样的语言——它是公认最强大.最复杂的:它一切以效率为第一要务,却又不肯落伍,拼命兼容现在的新的语言设计特点.本来在别的语言很容与就避开的问题,在这里要用很高的技巧去设 ...

随机推荐

  1. JAVA:简单添加菜单界面(swing)第二版

    环境:jdk1.8 package com.le.tool; import java.awt.Color; import java.awt.Container; import java.awt.Flo ...

  2. bzoj2730(割点+分类讨论)

    把割点删去后,剩下的联通块个数就是答案,方案数就是siz乘一起,但要讨论一些特殊情况,没有割点时答案直接算,一个联通块如果连接多个割点是不需算入答案的: #include<iostream> ...

  3. JSF初学之概念篇1

    先转一篇介绍JSF的文章: Javaserver Faces 简介 — 什么是 JSF? 作者:Chris Schalk,Oracle Corporation2005 年 4 月 什么是 JSF? J ...

  4. （二）Javascript面向对象编程：构造函数的继承

    Javascript面向对象编程:构造函数的继承   这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承 ...

  5. 冒泡排序 cpp实现

    #include<bits/stdc++.h> using namespace std; void Bubblesort(int a[],int n){ ;i<n-;i++){ ; ...

  6. Tmux会话的使用

    不想看废话的直接拖到下面看干货部分! 我们管理Linux服务器通常是通过ssh远程连接过去,如果在服务器上执行比较耗时的操作,比如下载安装软件.编译等等,如果需要数个小时来完成这些工作,但是又不得不关 ...

  7. 关于c++的一篇随笔

    众所周知c++是一门极其深奥的学科,正因为其深奥之处,才会让人们觉得学习起来特别难.当然,我想说我自己也不例外,想起当初就像一场噩梦一样,直到今日还历历在目.尽管如此,c++还是一门相当有魅力的课程, ...

  8. PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获--补充

    荒废了一个多月了,重新捡起来,手生了不少.发现在<4.1下>的文章里没有 提到pcap库,实在是不应该. 在网络数据分析的工具中,tcpdump绝对是大名鼎鼎,tcpdump底层是libp ...

  9. 项目Alpha冲刺（团队6/10）

    项目Alpha冲刺(团队6/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  10. jvm的垃圾回收和内存

    垃圾回收: 对象的创建是我们程序员主导的,但是却没有与之相对应的delete方法来删除我们用完的对象,释放这些我们已经不需要再使用的对象的内存空间,gc:垃圾回收机制:指的就是JVM自带的一种释放无用 ...