title: Getting 'fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present... on React page
body: <p>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.</p>
  <blockquote>
  <p>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.</p>
  </blockquote>
  <p>Here is my Startup.cs</p>
  <pre><code>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 =&gt; c.AddPolicy(name:&quot;MyPolicy&quot;, options =&gt;
              {
                  options.WithOrigins(&quot;http://localhost:3000&quot;)
                         .AllowAnyMethod()
                         .AllowAnyHeader();
              }));
              
              //JSON Serializer
              services.AddControllersWithViews().AddNewtonsoftJson(options =&gt;
              options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore)
                  .AddNewtonsoftJson(options =&gt; 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(&quot;MyPolicy&quot;);
  
              app.UseAuthorization();
  
              app.UseEndpoints(endpoints =&gt;
              {
                  endpoints.MapControllers();
              });
  
              app.UseStaticFiles(new StaticFileOptions
              {
                  FileProvider = new PhysicalFileProvider(
                     Path.Combine(Directory.GetCurrentDirectory(), &quot;Photos&quot;)),
                  RequestPath = &quot;/Photos&quot;
              });
          }
      }
  }
  </code></pre>
  <p>I believe the issue has to deal with the CORS Policy, but have tried everything. Does anything stand out to anyone?</p>
  <p>Here is my Campaign.js</p>
  <pre><code>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=&gt;response.json())
      .then(data=&gt;{
          this.setState({campaigns:data});
          console.log(data);
      });
  }
  
  componentDidMount(){
      this.refreshList();
  }
  
      render(){
          const {
              campaigns
          }=this.state;
  
          return(
              &lt;div&gt;
                  &lt;table className='table table-striped'&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;
                                  CampaignId
                              &lt;/th&gt;
                              &lt;th&gt;
                                  CampaignName
                              &lt;/th&gt;
                              &lt;th&gt;
                                  Options
                              &lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          {campaigns.map(camp=&gt;
                              &lt;tr key={camp.campaign_id}&gt;
                                  &lt;td&gt;{camp.campaign_id}&lt;/td&gt;
                                  &lt;td&gt;{camp.campaign_name}&lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;button type=&quot;button&quot; className=&quot;btn btn-light mr-1&quot;&gt;
                                          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-pencil-square&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                                          &lt;path d=&quot;M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z&quot;/&gt;
                                          &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z&quot;/&gt;
                                          &lt;/svg&gt;
                                      &lt;/button&gt;
                                      &lt;button type=&quot;button&quot; className=&quot;btn btn-light mr-1&quot;&gt;
                                          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-trash-fill&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                                          &lt;path d=&quot;M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z&quot;/&gt;
                                          &lt;/svg&gt;
                                      &lt;/button&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              )}
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Campaign;
  </code></pre>