注：下載本文的完整代碼示例請訪問 > How to enable CORS(Cross-origin resource sharing) in ASP.NET Core
如何在ASP.NET Core中實現CORS跨域
CORS(Cross-origin resource sharing)是一個W3C標准，翻譯過來就是 "跨域資源共享"，它主要是解決Ajax跨域限制的問題。
CORS需要瀏覽器和服務器支持，現在所有現代瀏覽器都支持這一特性。注：IE10及以上
只要瀏覽器支持，其實CORS所有的配置都是在服務端進行的，而前端的操作瀏覽器會自動完成。
在本例中，將演示如何再ASP.NET Core中實現CORS跨域。
前期准備
- 你需要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.
配置服務端
注：添加下面的代碼時IDE會提示代碼錯誤，這是因為還沒有引用對應的包，進入報錯的這一行，點擊燈泡，加載對應的包就可以了。
(圖文無關)
-
打開Startup.cs
- 在ConfigureServices中添加如下代碼：
services.AddCors();- 在Configure方法中添加如下代碼：
app.UseCors(builder => builder.WithOrigins("http://localhost"));完整的代碼應該是這樣：
public void ConfigureServices(IServiceCollection services) { services.AddCors(); } 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!"); }); }
來讓我們運行一下：
輸出結果很簡單，你會在瀏覽器上看到一個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