How to apply CORS by using Asp.Net Web Api Core 6 thought client side fetch?

Question

I am trying to access my asp.net core 6 Web API (.NET6) from client side fetch api in ReactJS.

But I am getting the CORS error.

What I want is to get data from the server but only my client application can access (server data) it.

see my components and error below

 --- Program.cs ----
 var builder = WebApplication.CreateBuilder(args);
    
    
 builder.Services.AddCors(options =>
 {
     options.AddPolicy(name: "MyPolicy",
                 policy =>
                 {
                     policy.WithOrigins("https://localhost:7260/","https://localhost:44485/")
                             .WithMethods("POST", "PUT", "DELETE", "GET");
                 });
 });
    
    
 // Add services to the container.
    
 builder.Services.AddControllersWithViews();
    
    
 #region Session/Cache Management
     builder.Services.AddDistributedMemoryCache();
    
     builder.Services.AddSession(options =>
     {
         options.IdleTimeout = TimeSpan.FromSeconds(10);
         options.Cookie.HttpOnly = true;
         options.Cookie.IsEssential = true;
     });
 #endregion
    
 #region Database Configurations
     var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");     
     builder.Services.AddSqlServer<CarRentalContext>(connectionString);
     builder.Services.AddScoped<IFranchiseRespository, FranchiseRespository>();
     builder.Services.AddScoped<IEnquiryRepository, EnquiryRepository>();
     builder.Services.AddScoped<ISearchRepository, SearchRepository>();
 #endregion
    
 var app = builder.Build();
    
 // Configure the HTTP request pipeline.
 if (!app.Environment.IsDevelopment())
 {
     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
     app.UseHsts();
 }
    
 app.UseHttpsRedirection();
 app.UseStaticFiles();
 app.UseRouting();
 #region Session/Cache Middleware
     app.UseSession();
 #endregion
 app.UseCors("MyPolicy");
    
 app.MapControllerRoute(
     name: "default",
     pattern: "{controller}/{action=Index}/{id?}");
    
 app.MapFallbackToFile("index.html"); ;
    
 app.Run();




[ApiController]
     [Route("api/[controller]")]
     //[EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")]
     public class CarRentalController : ControllerBase
     {
         private readonly IFranchiseRespository _repository;
         private readonly IEnquiryRepository _enquiryRepository;
         private readonly ISearchRepository _searchRepository;
    
         private readonly ILogger<CarRentalController> _logger;
    
         public CarRentalController(ILogger<CarRentalController> logger, IFranchiseRespository repository, IEnquiryRepository enquiryRepo, ISearchRepository searchRepo)
         {
             _logger = logger;
             _repository = repository;
             _enquiryRepository = enquiryRepo;
             _searchRepository = searchRepo;
         }
    
         [EnableCors]
         [HttpGet("allfranchises")]
         public async Task<ActionResult<List<FranchiseWebInquiry>>?> GetActiveFranchises()
         {
             try
             {
                 var items = await _repository.SearchFranchisesWebInquiryRes("");
                 if (items != null && items.Count > 0)
                 {
                     return items;
                 }
    
                 return null;
    
             }
             catch (Exception ex)
             {
                 _logger.LogError(ex.Message);
                 return null;
             }
         }
 }

and this is the client side logic to access this service/api

 let abortController = new AbortController();
             let apiUrl = https://localhost:7260/api/CarRental/allfranchises;
             const response = await fetch(apiUrl, {
                 signal: abortController.signal,
             });

This is my package.json

{
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "node-sass": "^7.0.1",        
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
        "react-router-dom": "^6.3.0",
        "react-scripts": "^5.0.0"
    },
    "devDependencies": {
        "cross-env": "^7.0.3"
    },
    "scripts": {
        "start": "set PORT=3001 &&react-scripts start",
       "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

Answer 1

Thank you everyone.

Issue has been fixed.

I just removed the slash and it worked

from

 policy.WithOrigins("https://localhost:7260/","https://localhost:44485/")

to

 policy.WithOrigins("https://localhost:7260","https://localhost:44485")

Problem is solved but if anyone can add some good tips then please add .