腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

談?wù)勅绾卧贏SP.NET Core中實(shí)現(xiàn)CORS跨域

更新時(shí)間：2016年12月02日 15:36:11 作者：微軟一站式示例代碼庫

本篇文章主要介紹了如何在ASP.NET Core中實(shí)現(xiàn)CORS跨域，CORS主要是解決Ajax跨域限制的問題，有興趣的可以了解一下。

CORS(Cross-origin resource sharing)是一個(gè)W3C標(biāo)準(zhǔn)，翻譯過來就是 "跨域資源共享"，它主要是解決Ajax跨域限制的問題。

CORS需要瀏覽器和服務(wù)器支持，現(xiàn)在所有現(xiàn)代瀏覽器都支持這一特性。注：IE10及以上

只要瀏覽器支持，其實(shí)CORS所有的配置都是在服務(wù)端進(jìn)行的，而前端的操作瀏覽器會(huì)自動(dòng)完成。

在本例中，將演示如何再ASP.NET Core中實(shí)現(xiàn)CORS跨域。

前期準(zhǔn)備

你需要windows系統(tǒng)。

你需要安裝IIS。

推薦使用VS2015 Update3或更新的版本來完成本例，下載地址：http://m.fzitv.net/softjc/446184.html

需要安裝.NET Core的開發(fā)環(huán)境，這里提供VS版：http://m.fzitv.net/softs/472362.html

創(chuàng)建項(xiàng)目

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

配置服務(wù)端

注：添加下面的代碼時(shí)IDE會(huì)提示代碼錯(cuò)誤，這是因?yàn)檫€沒有引用對(duì)應(yīng)的包，進(jìn)入報(bào)錯(cuò)的這一行，點(diǎn)擊燈泡，加載對(duì)應(yīng)的包就可以了。

(圖文無關(guān))

打開Startup.cs

在ConfigureServices中添加如下代碼：

services.AddCors();

在Configure方法中添加如下代碼：

app.UseCors(builder => builder.WithOrigins(http://localhost));

完整的代碼應(yīng)該是這樣：

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!");
  });
}

來讓我們運(yùn)行一下：

輸出結(jié)果很簡(jiǎn)單，你會(huì)在瀏覽器上看到一個(gè)Hello World!

瀏覽器端

既然是跨域，那我們就需要用兩個(gè)域名，上面我們已經(jīng)有了一個(gè)，類似于這樣的：http://localhost:1661/

接下來我們來用過IIS來搭建另外一個(gè)。

為了文章的簡(jiǎn)潔，這里假設(shè)你已知道如何在IIS上搭建一個(gè)網(wǎng)站，如有疑問，網(wǎng)上一堆答案。

首先我們新建一個(gè)文件夾，并將IIS默認(rèn)的localhost網(wǎng)站的根目錄指向該文件夾。

在該文件夾中添加一個(gè)文件index.html。

內(nèi)容應(yīng)該是這個(gè)樣子：

<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>

注：請(qǐng)求的地址應(yīng)為你上個(gè)項(xiàng)目的調(diào)試地址，撰寫此文時(shí)我項(xiàng)目的調(diào)試地址為http://localhost:1661/，具體以自己的情況為準(zhǔn)。

瀏覽localhost這個(gè)網(wǎng)站，js會(huì)跨域請(qǐng)求另外一個(gè)域名的地址，并彈出返回值。

在發(fā)起ajax請(qǐng)求時(shí)，瀏覽器一旦發(fā)現(xiàn)Ajax請(qǐng)求跨域，會(huì)自動(dòng)添加一些附加的頭信息并請(qǐng)求到目標(biāo)服務(wù)器（會(huì)帶有本域的域名），目標(biāo)服務(wù)器則檢測(cè)該域名是否在允許跨域的域名之列，如果有則返回請(qǐng)求結(jié)果，否則失敗。

分組策略以及MVC

上例僅僅是一個(gè)基本的配置方法，接下來將演示更高級(jí)一點(diǎn)的方式，下面將演示在分組策略以及與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();

完整的代碼應(yīng)該是這樣：

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

在項(xiàng)目中添加一個(gè)目錄Controllers,并在其中添加一個(gè)APIController,命名為HomeAPIController.cs

其中的內(nèi)容應(yīng)該是這樣：

//[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 中應(yīng)用哪個(gè)分組策略。

[DisableCors] 則為本controller或action不允許跨域資源請(qǐng)求

改造瀏覽器端html

修改localhost網(wǎng)站的index.html,內(nèi)容應(yīng)為：

<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>

調(diào)試

F5調(diào)試服務(wù)端項(xiàng)目，你會(huì)看到一個(gè)404頁面，因?yàn)槟J(rèn)路徑上沒有頁面，不用管它，瀏覽http://localhost, js會(huì)Get請(qǐng)求http://localhost:1661/API/HomeAPI，并彈出返回值，而如果你去Post請(qǐng)求http://localhost:1661/API/HomeAPI, 則請(qǐng)求會(huì)被攔截。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: