前言
可以說，前后端分離已經(jīng)成為當(dāng)今信息系統(tǒng)項目開發(fā)的主流軟件架構(gòu)模式，微服務(wù)的出現(xiàn)，讓前后端分離發(fā)展更是迅速，大量優(yōu)秀的前端框架如 vue.js、react 的出現(xiàn)，也讓前后端分離趨勢加快。
所謂的前后端分離軟件架構(gòu)模式，就是指將前端和后端的開發(fā)完全分離，后端負責(zé)提供API接口和數(shù)據(jù)處理，而前端通過各種現(xiàn)代的JavaScript技術(shù)如 AJAX 或者 Fetch 等，來調(diào)用后端提供的API接口獲取數(shù)據(jù)，從而構(gòu)建頁面展示數(shù)據(jù)和用戶交互。
前后端分離可以給信息系統(tǒng)項目開發(fā)帶來很多好處，比如有效地降低了系統(tǒng)的耦合度，前后端開發(fā)人員專注于各自的領(lǐng)域，提高了開發(fā)效率等等。
但前后端分別部署，也會不可避免地帶來跨域的問題。
解決跨域有很多方法，比如通過 Nginx 轉(zhuǎn)發(fā)等等方式。作為一款優(yōu)秀的 Web 開發(fā)框架，asp.net core webapi 也可以優(yōu)雅地解決跨域問題。
Step By Step 步驟
-
創(chuàng)建一個ASP.NET Core webapi 項目
-
打開 Program.cs
-
在語句
var app = builder.Build();之前注冊跨域服務(wù)var builder = WebApplication.CreateBuilder(args); ...... builder.Services.AddSwaggerGen(); //配置前端網(wǎng)址，可以寫在配置文件中實現(xiàn)靈活配置 string[] urls = new[] { "http://localhost:5173" }; //注冊跨域服務(wù)到容器中 builder.Services.AddCors(options => options.AddDefaultPolicy(builder => builder.WithOrigins(urls) .AllowAnyMethod().AllowAnyHeader().AllowCredentials())); ...... var app = builder.Build(); -
在語句
app.MapControllers();之前啟用跨域中間件，最好是一開始就啟用文章來源：http://www.zghlxwxcb.cn/news/detail-798589.htmlapp.UseCors(); -
這樣簡單兩步配置就輕松優(yōu)雅地解決了跨域問題了文章來源地址http://www.zghlxwxcb.cn/news/detail-798589.html
完整代碼：
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
string[] urls = new[] { "http://localhost:5173" };
builder.Services.AddCors(options =>
options.AddDefaultPolicy(builder => builder.WithOrigins(urls)
.AllowAnyMethod().AllowAnyHeader().AllowCredentials()));
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseCors();
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();
到了這里，關(guān)于前后端分離，Asp.net core webapi 簡單 2 步，輕松配置跨域的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
