while I am experienced in .NET and JavaScript, I am currently learning React and during the fetch to my REST API I am getting this error.

Access to fetch at 'https://localhost:7142/api/Campaign' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Here is my Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Newtonsoft.Json.Serialization;
using Microsoft.Extensions.FileProviders;
using System.IO;

namespace WebAPI
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            //Enable CORS
            services.AddCors(c => c.AddPolicy(name:"MyPolicy", options =>
            {
                options.WithOrigins("http://localhost:3000")
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));
            
            //JSON Serializer
            services.AddControllersWithViews().AddNewtonsoftJson(options =>
            options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore)
                .AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver
                = new DefaultContractResolver());

            services.AddControllers();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
           

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            //Enable CORS
            app.UseCors("MyPolicy");

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });

            app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(
                   Path.Combine(Directory.GetCurrentDirectory(), "Photos")),
                RequestPath = "/Photos"
            });
        }
    }
}

I believe the issue has to deal with the CORS Policy, but have tried everything. Does anything stand out to anyone?

Here is my Campaign.js

import React,{Component} from 'react';
import { variables } from './Variables';

export class Campaign extends Component{
constructor(props){
    super(props);

    this.state={
        campaigns:[]
    }
}

refreshList(){ 
    debugger;
    //fetch(variables.API_URL+'Campaign')
    fetch('https://localhost:7142/api/Campaign')
    .then(response=>response.json())
    .then(data=>{
        this.setState({campaigns:data});
        console.log(data);
    });
}

componentDidMount(){
    this.refreshList();
}

    render(){
        const {
            campaigns
        }=this.state;

        return(
            

                
                        {campaigns.map(camp=>
                            
                            )}
                    

                    

                        

                            

                                CampaignId
                            
                            

                                CampaignName
                            
                            

                                Options
                            
                        
                    
                    

                                
{camp.campaign_id}
                                
{camp.campaign_name}
                                

                                    
                                        
                                    
                                    
                                        
                                    
                                
                            
                
            
        )
    }
}

export default Campaign;