如何在ASP.NET Core中實現CORS跨域

時間 2019-12-14

標籤如何 asp.net asp core 實現 cors 欄目 ASP 简体版

原文原文鏈接

注：下載本文的完整代碼示例請訪問 > How to enable CORS(Cross-origin resource sharing) in ASP.NET Corehtml

如何在ASP.NET Core中實現CORS跨域

CORS(Cross-origin resource sharing)是一個W3C標準，翻譯過來就是 "跨域資源共享"，它主要是解決Ajax跨域限制的問題。
CORS須要瀏覽器和服務器支持，如今全部現代瀏覽器都支持這一特性。注：IE10及以上
只要瀏覽器支持，其實CORS全部的配置都是在服務端進行的，而前端的操做瀏覽器會自動完成。前端

在本例中，將演示如何再ASP.NET Core中實現CORS跨域。jquery

前期準備

你須要windows系統。
你須要安裝IIS。
推薦使用VS2015 Update3或更新的版原本完成本例，下載地址：https://www.visualstudio.com/
須要安裝.NET Core的開發環境，這裏提供VS版：https://www.microsoft.com/net/core#windows

建立項目

在VS中新建項目，項目類型選擇ASP.NET Core Web Application(.NET Core),輸入項目名稱爲：CSASPNETCoreCORS，Template選擇Empty.

ajax

配置服務端

注：添加下面的代碼時IDE會提示代碼錯誤，這是由於尚未引用對應的包，進入報錯的這一行，點擊燈泡，加載對應的包就能夠了。

(圖文無關)c#

打開Startup.cs
- 在ConfigureServices中添加以下代碼：
```
services.AddCors();
```
- 在Configure方法中添加以下代碼：
```
app.UseCors(builder => builder.WithOrigins("http://localhost"));
```
完整的代碼應該是這樣：
```
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
}windows

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseCors(builder => builder.WithOrigins("http://localhost"));
app.Run(async (context) =>
{
await context.Response.WriteAsync("Hello World!");
});
}
```api

來讓咱們運行一下：
輸出結果很簡單，你會在瀏覽器上看到一個Hello World!跨域

瀏覽器端

既然是跨域，那咱們就須要用兩個域名，上面咱們已經有了一個，相似於這樣的：http://localhost:1661/
接下來咱們來用過IIS來搭建另一個。瀏覽器

爲了文章的簡潔，這裏假設你已知道如何在IIS上搭建一個網站，若有疑問，網上一堆答案。服務器

首先咱們新建一個文件夾，並將IIS默認的localhost網站的根目錄指向該文件夾。
在該文件夾中添加一個文件index.html。
內容應該是這個樣子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <script>
        $.get("http://localhost:1661/", {}, function (data) {
            alert(data);
        }, "text");
    </script>
</body>
</html>

注：請求的地址應爲你上個項目的調試地址，撰寫此文時我項目的調試地址爲http://localhost:1661/，具體以本身的狀況爲準。

瀏覽localhost這個網站，js會跨域請求另一個域名的地址，並彈出返回值。

在發起ajax請求時，瀏覽器一旦發現Ajax請求跨域，會自動添加一些附加的頭信息並請求到目標服務器（會帶有本域的域名），目標服務器則檢測該域名是否在容許跨域的域名之列，若是有則返回請求結果，不然失敗。
具體的原理能夠看看這篇博客：跨域資源共享 CORS 詳解。

分組策略以及MVC

上例僅僅是一個基本的配置方法，接下來將演示更高級一點的方式，下面將演示在分組策略以及與MVC的整合。

Startup.cs
- ConfigureServices中
```
services.AddCors(options =>
{
    options.AddPolicy("AllowSpecificOrigin", builder =>
    {
        builder.WithOrigins("http://localhost", "https://www.microsoft.com");
    });
    options.AddPolicy("AllowSpecificOrigin1", builder =>
    {
        builder.WithOrigins("http://localhost:8080", "https://www.stackoverflow.com");
    });
});
services.AddMvc();
```
- Configure中
```
app.UseMvc();
```
完整的代碼應該是這樣：
```
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("AllowSpecificOrigin", builder =>
{
builder.WithOrigins("http://localhost", "https://www.microsoft.com");
});
});
```
services.AddMvc();
```
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseMvc();
}
```

接下來咱們來添加Controller

在項目中添加一個目錄Controllers,並在其中添加一個APIController,命名爲HomeAPIController.cs
其中的內容應該是這樣：
```
//[EnableCors("AllowSpecificOrigin")]
[Route("api/[controller]")]

public class HomeAPIController : Controller
{
[EnableCors("AllowSpecificOrigin")]
[HttpGet]
public string Get()
{
return "this message is from another origin";
}
```
[DisableCors]
  [HttpPost]
  public string Post()
  {
      return "this method can't cross origin";
  }
```
}
```

[EnableCors("AllowSpecificOrigin")] 既爲在本 controller 或 action 中應用哪一個分組策略。
[DisableCors] 則爲本controller或action不容許跨域資源請求
改造瀏覽器端html
修改localhost網站的index.html,內容應爲：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <script>
        $.get("http://localhost:1661/API/HomeAPI", {}, function (data) {
            alert(data);
        }, "text");
    </script>
</body>
</html>

調試
F5調試服務端項目，你會看到一個404頁面，由於默認路徑上沒有頁面，不用管它，
瀏覽http://localhost, js會Get請求http://localhost:1661/API/HomeAPI，並彈出返回值，
而若是你去Post請求http://localhost:1661/API/HomeAPI, 則請求會被攔截。

注：下載本文的完整代碼示例請訪問 > How to enable CORS(Cross-origin resource sharing) in ASP.NET Core

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。