title: CORS - No 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>I would like to POST data from a Font-end form (coded in REACT) to an API Server (coded in C#).</p>
  <p>To do so, I coded the following:</p>
  <p><em><strong>For the Front-end:</strong></em></p>
  <pre><code>const [analysis, setAnalysis] = useState(null);
  
  const headers = {
      'Content-Type': 'application/json;charset=UTF-8',
      &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
      'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': '*'
  };
  
  
  useEffect(() =&gt; {
      axios.get(baseURL, {
          mode: 'cors',
          headers: headers,
      }).then((response) =&gt; {
          setAnalysis(response.analysis);
      });
  }, []);
  </code></pre>
  <p><em><strong>For the Back-end:</strong></em></p>
  <pre><code>builder.Services.AddCors(options =&gt;
  {
      options.AddPolicy(&quot;MyMyAllowCredentialsPolicy&quot;,
          builder =&gt;
          {
              builder.AllowAnyMethod()
                  .AllowAnyHeader()
                  .SetIsOriginAllowed(origin =&gt; true) // allow any origin
                  .AllowCredentials(); // allow credentials
          }
      );
  }); 
  </code></pre>
  <p>Nevertheless, I have the following issue :
  <a href="https://i.stack.imgur.com/8OP7Q.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8OP7Q.png" alt="enter image description here" /></a></p>
  <p>I tried so many different configurations, but nothing worked.
  Does someone have any idea what is the problem and how to solve it?</p>
  <p>Thank you in advance,
  Alexia</p>
  <hr />
  <p>[Edition]</p>
  <p>Following all the advises, I changed my code.</p>
  <p><em><strong>The Front-end part:</strong></em></p>
  <pre><code>const headers = {
          'Content-Type': 'application/json;charset=UTF-8',
      };
  
  
      useEffect(() =&gt; {
          axios.get(baseURL, {
              mode: 'cors',
              headers: headers,
          }).then((response) =&gt; {
              setAnalysis(response.analysis);
          });
      }, []);
  </code></pre>
  <p><em><strong>The back-end :</strong></em></p>
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  
  var MyAllowSpecificOrigins = &quot;_myAllowSpecificOrigins&quot;;
  var builder = WebApplication.CreateBuilder(args);
  
  // Add services to the container.
  builder.Services.AddCors(options =&gt;
  {
      options.AddPolicy(MyAllowSpecificOrigins,
                            builder =&gt;
                            {
                                builder.WithOrigins(&quot;http://localhost:3000/&quot;)
                                                    .AllowAnyHeader()
                                                    .AllowAnyMethod();
                            });
  });
  
  builder.Services.AddControllers();
  // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
  builder.Services.AddEndpointsApiExplorer();
  builder.Services.AddSwaggerGen();
  
  
  var app = builder.Build();
  
  app.UseCors(MyAllowSpecificOrigins);
  
  // Configure the HTTP request pipeline.
  if (app.Environment.IsDevelopment())
  {
      app.UseSwagger();
      app.UseSwaggerUI();
  }
  
  app.UseHttpsRedirection();
  
  app.UseRouting();
  
  app.UseAuthorization();
  
  app.MapControllers();
  
  app.Run();
  </code></pre>
  <p>With this configuration I still have :</p>
  <pre><code>Access to XMLHttpRequest at 'https://localhost:7067/...?id=1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  </code></pre>