前后端分离,Asp.net core webapi 如何配置跨域

简介: 前后端分离,Asp.net core webapi 如何配置跨域

前言

可以说,前后端分离已经成为当今信息系统项目开发的主流软件架构模式,微服务的出现,让前后端分离发展更是迅速,大量优秀的前端框架如 vue.js、react 的出现,也让前后端分离趋势加快。

所谓的前后端分离软件架构模式,就是指将前端和后端的开发完全分离,后端负责提供API接口和数据处理,而前端通过各种现代的JavaScript技术如 AJAX 或者 Fetch 等,来调用后端提供的API接口获取数据,从而构建页面展示数据和用户交互。

前后端分离可以给信息系统项目开发带来很多好处,比如有效地降低了系统的耦合度,前后端开发人员专注于各自的领域,提高了开发效率等等。

但前后端分别部署,也会不可避免地带来跨域的问题。

解决跨域有很多方法,比如通过 Nginx 转发等等方式。作为一款优秀的 Web 开发框架,asp.net core webapi 也可以优雅地解决跨域问题。

使用步骤

  1. 创建一个ASP.NET Core webapi 项目
  2. 打开 Program.cs
  3. 在语句 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();

4.在语句 app.MapControllers(); 之前启用跨域中间件,最好是一开始就启用

app.UseCors();

5.这样简单两步配置就轻松优雅地解决了跨域问题了

完整代码:

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();


相关文章
简化 ASP.NET Core 依赖注入(DI)注册-Scrutor
Scrutor 是一个简化 ASP.NET Core 应用程序中依赖注入(DI)注册过程的开源库,支持自动扫描和注册服务。通过简单的配置,开发者可以轻松地从指定程序集中筛选、注册服务,并设置其生命周期,同时支持服务装饰等高级功能。适用于大型项目,提高代码的可维护性和简洁性。仓库地址:<https://github.com/khellang/Scrutor>
67 5
ASP.NET Core 中的速率限制中间件
在ASP.NET Core中,速率限制中间件用于控制客户端请求速率,防止服务器过载并提高安全性。通过`AddRateLimiter`注册服务,并配置不同策略如固定窗口、滑动窗口、令牌桶和并发限制。这些策略可在全局、控制器或动作级别应用,支持自定义响应处理。使用中间件`UseRateLimiter`启用限流功能,并可通过属性禁用特定控制器或动作的限流。这有助于有效保护API免受滥用和过载。 欢迎关注我的公众号:Net分享 (239字符)
67 1
GraphQL 与 ASP.NET Core 集成:从入门到精通
本文详细介绍了如何在ASP.NET Core中集成GraphQL,包括安装必要的NuGet包、创建GraphQL Schema、配置GraphQL服务等步骤。同时,文章还探讨了常见问题及其解决方法,如处理复杂查询、错误处理、性能优化和实现认证授权等,旨在帮助开发者构建灵活且高效的API。
60 3
关于Asp.net core配置信息读取的源码分析梳理
我们都知道asp.net core配置信息的读取离不开IConfigurationSource和IConfigurationProvider这两个类,ConfigurationSource可以提供一个ConfigurationProvider,然后去读取信息。究竟他们之间有着怎样的千丝万缕,我们一起来看看源码。
136 0
关于Asp.net core配置信息读取的源码分析梳理
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
78 7
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
118 0
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
86 0
|
6月前
|
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
189 0
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
251 0

热门文章

最新文章