标签 跨域 下的文章

背景

项目开发采用的是vue+abp WebApi方式,开发过程中发现有跨域问题。

解决方案

XXXHostModule类中ConfigureServices方法下添加如下代码:

var configuration = context.Services.GetConfiguration();
var hostingEnvironment = context.Services.GetHostingEnvironment();

ConfigureCors(context, configuration);

ConfigureCors方法如下:


private const string DefaultCorsPolicyName = "Default";
private void ConfigureCors(ServiceConfigurationContext context, IConfiguration configuration)
{
    context.Services.AddCors(options =>
    {
        options.AddPolicy(DefaultCorsPolicyName, builder =>
        {
            builder
                //.AllowAnyOrigin()
                .WithOrigins(
                    configuration["App:CorsOrigins"]
                        .Split(",", StringSplitOptions.RemoveEmptyEntries)
                        .Select(o => o.RemovePostFix("/"))
                        .ToArray()
                )
                .WithAbpExposedHeaders()
                .SetIsOriginAllowedToAllowWildcardSubdomains()
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials();
        });
    });
}

XXXHostModule类中OnApplicationInitialization方法下添加如下代码:

var app = context.GetApplicationBuilder();

app.UseCors(DefaultCorsPolicyName);

appsettings.json中添加如下配置,根据需求进行添加,本示例为开发环境配置,所以加入了localhost:8080

  "App": {
    "CorsOrigins": "http://localhost:8080,http://10.10.10.144:8080,*"
  }

完成,这样就可以进行跨域访问了