【轉】c# WebApi之解決跨域問題：Cors

本文連接： https://blog.csdn.net/lwpoor123/article/details/78457589

WebApi相關文章：javascript

什麼是跨域問題

出於安全考慮，瀏覽器會限制腳本中發起的跨站請求，瀏覽器要求JavaScript或Cookie只能訪問同域下的內容。因爲這個緣由，咱們不一樣站點之間的數據訪問會被拒絕。css

Cors解決跨域問題

跨域資源共享（ CORS ）機制容許 Web 應用服務器進行跨域訪問控制，從而使跨域數據傳輸得以安全進行。它解決跨域問題的原理是經過向http的請求報文和響應報文裏面加入相應的標識告訴瀏覽器它能訪問哪些域名的請求。html

解決跨域問題實例

下面就寫一個簡單是實例來講明如何使用CORS解決跨域java

一、創建測試項目

1.一、新建兩個ASP.NET Web 應用程序，做爲Web站點和WebApi站點：
jquery

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

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

在控制器中新建一個測試方法，用於返回請求數據：ajax

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

啓動Web API項目，站點端口號爲：8476json

1.三、配置Web站點
新建一個index測試頁面：c#

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

用jquery 的 ajax處理請求：api

     
     
     
     
      
      
      
      1
      
      
      
      2
      
      
      
      3
      
      
      
      4
      
      
      
      5
      
      
      
      6
      
      
      
      7
      
      
      
      8
      
      
      
      9
      
      
      
      10
      
      
      
      11
      
      
      
      12
      
      
      
      13
      
      
      
      14
      
      
      
      15
      
      
      
      16
      
      
      
      17
      
      
      
      18
      
      
      
      19
      
      
      
      20
      
      
      
      21
      
      
      
      22
      
      
      
      23
     
     
     
     
<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文件夾配置跨域

     
     
     
     
      
      
      
      1
      
      
      
      2
      
      
      
      3
      
      
      
      4
      
      
      
      5
      
      
      
      6
      
      
      
      7
      
      
      
      8
      
      
      
      9
      
      
      
      10
      
      
      
      11
      
      
      
      12
      
      
      
      13
      
      
      
      14
      
      
      
      15
      
      
      
      16
      
      
      
      17
     
     
     
     
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的問題了：

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

     
     
     
     
      
      
      
      1
      
      
      
      2
      
      
      
      3
      
      
      
      4
      
      
      
      5
     
     
     
     <appSettings>
  <add key="cors:allowedMethods" value="*"/>
  <add key="cors:allowedOrigin" value="http://localhost:8610"/>
  <add key="cors:allowedHeaders" value="*"/>
</appSettings>

而後在WebApiConfig.cs文件配置

     
     
     
     
      
      
      
      1
      
      
      
      2
      
      
      
      3
      
      
      
      4
      
      
      
      5
      
      
      
      6
      
      
      
      7
      
      
      
      8
      
      
      
      9
      
      
      
      10
      
      
      
      11
      
      
      
      12
      
      
      
      13
     
     
     
     
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的類上面使用特性標註便可。

     
     
     
     
      
      
      
      1
      
      
      
      2
      
      
      
      3
      
      
      
      4
      
      
      
      5
      
      
      
      6
      
      
      
      7
      
      
      
      8
      
      
      
      9
      
      
      
      10
      
      
      
      11
      
      
      
      12
      
      
      
      13
     
     
     
     
[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";
    }
}