前后端分离,Asp.net core webapi 简单 2 步,轻松配置跨域
前言
可以说,前后端分离已经成为当今信息系统项目开发的主流软件架构模式,微服务的出现,让前后端分离发展更是迅速,大量优秀的前端框架如 vue.js、react 的出现,也让前后端分离趋势加快。
所谓的前后端分离软件架构模式,就是指将前端和后端的开发完全分离,后端负责提供API接口和数据处理,而前端通过各种现代的JavaScript技术如 AJAX 或者 Fetch 等,来调用后端提供的API接口获取数据,从而构建页面展示数据和用户交互。
前后端分离可以给信息系统项目开发带来很多好处,比如有效地降低了系统的耦合度,前后端开发人员专注于各自的领域,提高了开发效率等等。
但前后端分别部署,也会不可避免地带来跨域的问题。
解决跨域有很多方法,比如通过 Nginx 转发等等方式。作为一款优秀的 Web 开发框架,asp.net core webapi 也可以优雅地解决跨域问题。
Step By Step 步骤
-
创建一个ASP.NET Core webapi 项目
-
打开 Program.cs
-
在语句
var app = builder.Build();
之前注册跨域服务var builder = WebApplication.CreateBuilder(args); ...... 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(); -
在语句
app.MapControllers();
之前启用跨域中间件,最好是一开始就启用app.UseCors(); -
这样简单两步配置就轻松优雅地解决了跨域问题了
完整代码:
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();
分类:
C#
, Asp.NET Core
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)