abp.vnext vue 跨域设置

在vue中js访问非同地址的webapi，会报Access to XMLHttpRequest at 'xxxx' from origin 'http://localhost:9527' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource。主要是调用的webapi没有设置允许跨域的地址。

1.xxxModule中设置CorsPolicyName值。

private const string DefaultCorsPolicyName = "Default";

2.配置configurecors

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

3.在ConfigureServices中调用ConfigureCors

 public override void ConfigureServices(ServiceConfigurationContext context)
        {
            var hostingEnvironment = context.Services.GetHostingEnvironment();
            var configuration = context.Services.GetConfiguration(); 
            ConfigureUrls(configuration);
            ConfigureBundles();
            ConfigureAuthentication(context, configuration);
            ConfigureAutoMapper();
            ConfigureVirtualFileSystem(hostingEnvironment);
            ConfigureLocalizationServices();
            ConfigureNavigationServices();
            ConfigureAutoApiControllers();
            //CorsOrigins 设置
            ConfigureCors(context, configuration);
            ConfigureSwaggerServices(context.Services);
        }

4.在OnApplicationInitialization使用UseCors

app.UseCors(DefaultCorsPolicyName);

5.在appsettings.json中设置允许跨域访问的地址

"App": { 
    "CorsOrigins": "https://*.ti.com,http://localhost:4200,http://localhost:9527"
  },

abp.vnext vue 跨域设置

相关推荐