This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(54.400000000000006, 69%, 15%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EDQ%3C/text%3E%3C/svg%3E)
asp.net with vue js FsLightbox lybrary Access to XMLHttpRequest at 'https://localhost:44347/CarImages/3e0da2fa7fd0417ea2e2f4678229e264Logo.png' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. error
when use FsLightbox library show this error , im use this images path in another slider its run good and im use another images from internet to FsLightbox also run good this problem just appear when use my images paths with FsLightbox !!??
// this is policy code from program.cs
builder.Services.AddCors(options =>
{
options.AddPolicy(name:"MyAllowSpecificOrigins",
builder =>
{
builder.WithOrigins("http://localhost:5173")
.AllowAnyMethod()
.AllowAnyHeader()
.SetIsOriginAllowedToAllowWildcardSubdomains();
});
});
/////////////////////
// this in vue js FsLightbox like documntation
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(128, 8%, 22%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EA%3C/text%3E%3C/svg%3E)
Hi @diaaaldin qosa, How is your whole Program.cs? With endpoint routing, the CORS middleware must be configured to execute between the calls to UseRouting and UseEndpoints .Ensure that your images are correctly served by your application. You can test this by directly navigating to https://localhost:44347/CarImages/3e0da2fa7fd0417ea2e2f4678229e264Logo.png in your browser. If this URL does not work, you may need to check the file path or controller logic.
thanks frind i will put here my program.cs file code
this is the first time face this problem
the images run good in another slider and the FsLiteBox liybrary run good with another images from internet ??!!
using Autofac.Core;
using AutoMapper;
using MarkabatiApi;
using MarkabatiApi.Attributes;
using MarkabatiApi.Core.Mangers.AnnouncementManager;
using MarkabatiApi.Core.Mangers.CommonManger;
using MarkabatiApi.Core.Mangers.OrderManager;
using MarkabatiApi.Core.Mangers.RoleManger;
using MarkabatiApi.Core.Mangers.UserManger;
using MarkabatiApi.Core.Mangers.VehicleManager;
using MarkabatiApi.DbModel.Data;
using MarkabatiApi.EmailService;
using MarkabatiApi.Extenstions;
using MarkabatiApi.Factory;
using MarkabatiApi.GeneralSettings;
using MarkabatiApi.Mapper;
using MarkabatiApi.Models;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Cors.Infrastructure;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.IdentityModel.Tokens;
using Microsoft.OpenApi.Models;
using Serilog;
using System.Text;
var builder = WebApplication.CreateBuilder(args);
// Configuration
builder.Configuration.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true);
builder.Configuration.AddJsonFile("appsettings.Local.json", optional: true, reloadOnChange: true);
builder.Configuration.AddEnvironmentVariables();
// General services
builder.Services.Configure<GeneralSettings>(builder.Configuration.GetSection("GeneralSettings"));
builder.Services.AddTransient<GeneralService>();
// Email configuration
var emailConfig = builder.Configuration.GetSection("EmailConfiguration").Get<EmailConfiguration>();
builder.Services.AddSingleton(emailConfig);
// Database context
builder.Services.AddDbContext<MarkabatiApiDbContext>(options =>
options.UseSqlServer(builder.Configuration.GetConnectionString("MarkabatiConnection")));
// AutoMapper configuration
var mapperConfiguration = new MapperConfiguration(a => {
a.AddProfile(new Mapping());
});
builder.Services.AddSingleton(mapperConfiguration.CreateMapper());
// Logging
builder.Services.AddLogging();
builder.Services.AddControllers();
// Swagger configuration
builder.Services.AddSwaggerGen(c =>
{
c.SwaggerDoc("v1", new OpenApiInfo { Title = "MarkabtiApi", Version = "v1" });
c.OperationFilter<SwaggerDefaultValues>();
c.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme
{
Description = "Please insert Bearer JWT token into field. Example: 'Bearer {token}'",
Name = "Authorization",
In = ParameterLocation.Header,
Type = SecuritySchemeType.ApiKey
});
c.AddSecurityRequirement(new OpenApiSecurityRequirement
{
{
new OpenApiSecurityScheme
{
Reference = new OpenApiReference
{
Type = ReferenceType.SecurityScheme,
Id = "Bearer"
},
Scheme = "oauth2",
Name = "Bearer",
In = ParameterLocation.Header
},
new List<string>()
}
});
});
// CORS configuration
builder.Services.AddCors(options =>
{
options.AddPolicy("CorsPolicy", policyBuilder => policyBuilder
.WithOrigins("http://localhost:5173", "http://localhost:8080", "http://localhost:9000")
.SetIsOriginAllowedToAllowWildcardSubdomains()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
// Authentication and authorization
builder.Services.AddAuthentication(options =>
{
options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(option =>
{
option.SaveToken = true;
option.RequireHttpsMetadata = false;
option.TokenValidationParameters = new TokenValidationParameters()
{
ValidateIssuer = true,
ValidateAudience = true,
ValidateLifetime = true,
ValidateIssuerSigningKey = true,
ValidAudience = builder.Configuration["Jwt:Issuar"],
ValidIssuer = builder.Configuration["Jwt:Issuar"],
IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Key"]))
};
});
// Register dependencies
ApiFactory.RegisterDependencies(builder.Services);
var app = builder.Build();
if (app.Environment.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "MarkabtiApi v1"));
}
// Logging configuration
Log.Logger = new LoggerConfiguration()
.WriteTo.File("Logs/log.txt", rollingInterval: RollingInterval.Minute)
.CreateLogger();
using (var scope = app.Services.CreateScope())
{
var services = scope.ServiceProvider;
var context = services.GetRequiredService<MarkabatiApiDbContext>();
SeedData.SeedRolesAndSuperAdmin(context);
}
app.UseSwagger(c =>
{
c.RouteTemplate = "swagger/{documentName}/swagger.json";
c.PreSerializeFilters.Add((swaggerDoc, httpReq) =>
{
swaggerDoc.Servers = new List<OpenApiServer>
{
new OpenApiServer { Url = $"{builder.Configuration.GetSection("Domain").Value}" }
};
});
});
app.ConfigureExceptionHandler(Log.Logger, app.Environment);
app.UseHttpsRedirection();
app.UseRouting();
// Apply CORS policy
app.UseCors("CorsPolicy");
app.UseStaticFiles();
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
app.Run();
im really need a help
Hi diaaaldin qosa, can you set the log level in appsettings.json like below to give us more details about the issue:
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
Besides, how do you send the request, pls try to set the "datatype" parameter to "jsonp" if you using ajax.
In ASP.NET Core the static file handler returns static files like images. One option is to configure the static file handlers. I found the following article when doing a Google search for static file handler core and CORS.
https://www.bytefish.de/blog/aspnetcore_static_files_cors.html
Another option is to craft a controller to return a file stream.