ASP.NET?CORE實(shí)現(xiàn)跨域
更新時間：2022年03月13日 15:05:05 作者：.NET開發(fā)菜鳥
這篇文章介紹了ASP.NET?CORE實(shí)現(xiàn)跨域的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
一、后臺API接口
用.net core創(chuàng)建一個Web API項(xiàng)目負(fù)責(zé)給前端界面提供數(shù)據(jù)。
二、前端界面
建立兩個MVC項(xiàng)目，模擬不同的ip，在view里面添加按鈕調(diào)用WEB API提供的接口進(jìn)行測試跨域。view視圖頁代碼如下：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>跨域測試1</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
function btnGet() {
$.ajax({
url: 'https://localhost:44355/api/values',
type: "Get",
dataType: "json",
success: function (data) {
alert("成功");
},
error: function (data) {
alert("失敗");
}
});
}
</script>
</head>
<body>
<div>
<input type="button" id="btn" value="測試跨域" onclick="btnGet()" />
</div>
</body>
</html>三、測試
1、不設(shè)置允許跨域
首先，先不設(shè)置.net core允許跨域，查看調(diào)用效果：
點(diǎn)擊測試跨域1按鈕：
F12進(jìn)入Debug模式查看失敗原因：
從這里可以看出來是因?yàn)楫a(chǎn)生了跨域問題，所以會失敗。
點(diǎn)擊測試跨域2的效果和此效果一致。
2、設(shè)置允許所有來源跨域
2.1、在StartUp類的ConfigureServices方法中添加如下代碼：
// 配置跨域處理，允許所有來源
services.AddCors(options =>
options.AddPolicy("cors",
p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials()));2.2、修改Configure方法
// 允許所有跨域，cors是在ConfigureServices方法中配置的跨域策略名稱
app.UseCors("cors");2.3、測試
從截圖中可以看出，這次調(diào)用成功了。
3、設(shè)置特定來源可以跨域
3.1、修改ConfigureServices方法代碼如下：
//允許一個或多個來源可以跨域
services.AddCors(options =>
{
options.AddPolicy("CustomCorsPolicy", policy =>
{
// 設(shè)定允許跨域的來源，有多個可以用','隔開
policy.WithOrigins("http://localhost:21632")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});這里設(shè)置只允許ip為http://localhost:21632的來源允許跨域。
3.2、修改Configure代碼如下：
// 設(shè)定特定ip允許跨域 CustomCorsPolicy是在ConfigureServices方法中配置的跨域策略名稱
app.UseCors("CustomCorsPolicy");3.3測試
點(diǎn)擊跨域測試1按鈕，結(jié)果如下：
可以看到訪問成功了，然后在點(diǎn)擊跨域測試2按鈕，結(jié)果如下：
發(fā)現(xiàn)這次訪問失敗了，F(xiàn)12進(jìn)入Debug模式，查看失敗原因：
從截圖中可以看出是因?yàn)檫@里產(chǎn)生了跨域請求，但是沒有允許跨域測試2所在的ip跨域。那么如果也想讓跨域測試2可以調(diào)用成功該怎么辦呢？
光標(biāo)定位到WithOrigins上面，然后F12查看定義：
從截圖中發(fā)現(xiàn)：WithOrigins的參數(shù)是一個params類型的字符串?dāng)?shù)組，如果要允許多個來源可以跨域，只要傳一個字符串?dāng)?shù)組就可以了，所以代碼修改如下：
//允許一個或多個來源可以跨域
services.AddCors(options =>
{
options.AddPolicy("CustomCorsPolicy", policy =>
{
// 設(shè)定允許跨域的來源，有多個可以用','隔開
policy.WithOrigins("http://localhost:21632", "http://localhost:24661")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});這時跨域測試2也可以調(diào)用成功了
4、優(yōu)化
在上面的例子中，需要分兩步進(jìn)行設(shè)置才可以允許跨域，有沒有一種方法只需要設(shè)置一次就可以呢？在Configure方法中只設(shè)置一次即可，代碼如下：
// 設(shè)置允許所有來源跨域
app.UseCors(options =>
{
options.AllowAnyHeader();
options.AllowAnyMethod();
options.AllowAnyOrigin();
options.AllowCredentials();
});
// 設(shè)置只允許特定來源可以跨域
app.UseCors(options =>
{
options.WithOrigins("http://localhost:3000", "http://127.0.0.1"); // 允許特定ip跨域
options.AllowAnyHeader();
options.AllowAnyMethod();
options.AllowCredentials();
});5、利用配置文件實(shí)現(xiàn)跨域
在上面的示例中，都是直接把ip寫在了程序里面，如果要增加或者修改允許跨域的ip就要修改代碼，這樣非常不方便，那么能不能利用配置文件實(shí)現(xiàn)呢？看下面的例子。
5.1、修改appsettings.json文件如下：
{
"Logging": {
"LogLevel": {
"Default": "Warning"
}
},
"AllowedHosts": {
"url": "http://localhost:21632|http://localhost:24663"
}
}AllowedHosts里面設(shè)置的是允許跨域的ip，多個ip直接用“|”進(jìn)行拼接，也可以用其他符合進(jìn)行拼接。
5.2、增加CorsOptions實(shí)體類
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace CorsDomainDemo
{
public class CorsOptions
{
public string url { get; set; }
}
}5.3、 新增OptionConfigure方法
private void OptionConfigure(IServiceCollection services)
{
services.Configure<CorsOptions>(Configuration.GetSection("AllowedHosts"));
}5.4、在ConfigureServices方法里面調(diào)用OptionConfigure方法
// 讀取配置文件內(nèi)容 OptionConfigure(services);
5.5、修改Configure方法，增加IOptions<CorsOptions>類型的參數(shù)，最終代碼如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
namespace CorsDomainDemo
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
// 配置跨域處理，允許所有來源
//services.AddCors(options =>
//options.AddPolicy("cors",
//p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials()));
//允許一個或多個來源可以跨域
//services.AddCors(options =>
//{
// options.AddPolicy("CustomCorsPolicy", policy =>
// {
// // 設(shè)定允許跨域的來源，有多個可以用','隔開
// policy.WithOrigins("http://localhost:21632", "http://localhost:24661")
// .AllowAnyHeader()
// .AllowAnyMethod()
// .AllowCredentials();
// });
//});
// 讀取配置文件內(nèi)容
OptionConfigure(services);
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, IOptions<CorsOptions> corsOptions)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHsts();
}
// 允許所有跨域，cors是在ConfigureServices方法中配置的跨域策略名稱
//app.UseCors("cors");
// 設(shè)定特定ip允許跨域 CustomCorsPolicy是在ConfigureServices方法中配置的跨域策略名稱
//app.UseCors("CustomCorsPolicy");
// 設(shè)置允許所有來源跨域
//app.UseCors(options =>
//{
// options.AllowAnyHeader();
// options.AllowAnyMethod();
// options.AllowAnyOrigin();
// options.AllowCredentials();
//});
// 設(shè)置只允許特定來源可以跨域
//app.UseCors(options =>
//{
// options.WithOrigins("http://localhost:3000", "http://127.0.0.1"); // 允許特定ip跨域
// options.AllowAnyHeader();
// options.AllowAnyMethod();
// options.AllowCredentials();
//});
// 利用配置文件實(shí)現(xiàn)
CorsOptions _corsOption = corsOptions.Value;
// 分割成字符串?dāng)?shù)組
string[] hosts = _corsOption.url.Split('|');
// 設(shè)置跨域
app.UseCors(options =>
{
options.WithOrigins(hosts);
options.AllowAnyHeader();
options.AllowAnyMethod();
options.AllowCredentials();
});
app.UseHttpsRedirection();
app.UseMvc();
}
private void OptionConfigure(IServiceCollection services)
{
services.Configure<CorsOptions>(Configuration.GetSection("AllowedHosts"));
}
}
}這樣就可以實(shí)現(xiàn)利用配置文件實(shí)現(xiàn)允許跨域了。
到此這篇關(guān)于ASP.NET CORE實(shí)現(xiàn)跨域的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章介紹了asp.net Gridview分頁保存選項(xiàng)，有需要的朋友可以參考一下2013-08-08
使用ASP.Net?WebAPI構(gòu)建REST服務(wù)
這篇文章介紹了使用ASP.Net?WebAPI構(gòu)建REST服務(wù)的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了詳解ASP.NET Core Token認(rèn)證,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。2016-12-12
ASP.NET Web應(yīng)用程序的安全解決方案淺析
ASP.NET Web應(yīng)用程序的安全解決方案淺析,讓大家在以后的開發(fā)中，多注意一下安全問題。2009-11-11
MVC項(xiàng)目結(jié)構(gòu)搭建及單個類的實(shí)現(xiàn)學(xué)習(xí)筆記1
這篇文章主要介紹了MVC項(xiàng)目結(jié)構(gòu)搭建及單個類在各個層次中的實(shí)現(xiàn),具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
最近學(xué)習(xí)了下C#中實(shí)現(xiàn)郵件發(fā)送功能,并將該功能用于本博客的密碼找回中！2008-11-11
這篇文章主要為大家詳細(xì)介紹了.Net?Core使用layui多文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
ASP.NET 2.0 中的創(chuàng)建母版頁...2006-09-09
CLR最重要的一個特性就是類型安全,CLR在運(yùn)行時總能知道一個對象的類型,我們也可以通過調(diào)用GetType()方法，來得到對象的準(zhǔn)確類型,接下來詳細(xì)介紹，感興趣的朋友可以了解下2013-01-01
解決在Web.config或App.config中添加自定義配置的方法詳解
本篇文章是對在Web.config或App.config中添加自定義配置的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-05-05