title: Cannot get Signal R working due to cors issue - blocked by cors policy
body: <p>I am using React with Signal R</p>
  
  <p>I have a standard web application that hosts my hub.</p>
  
  <p>When I send messages all works perfectly in the web page for the web application</p>
  
  <p>I also have a react application that is hosted on port 3000</p>
  
  <p>I changed IIS Express settings as per below</p>
  
  <pre><code>    &lt;httpProtocol&gt;
        &lt;customHeaders&gt;
          &lt;clear /&gt;
          &lt;add name="X-Powered-By" value="ASP.NET" /&gt;
          &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
          &lt;add name="Access-Control-Allow-Headers" value="Content-Type" /&gt;
        &lt;/customHeaders&gt;
        &lt;redirectHeaders&gt;
          &lt;clear /&gt;
        &lt;/redirectHeaders&gt;
      &lt;/httpProtocol&gt;
  </code></pre>
  
  <p>and my server side Startup for cors etc is below</p>
  
  <pre><code>    // This method gets called by the runtime. Use this method to add services to the container.
      public void ConfigureServices(IServiceCollection services)
      {
          services.AddRazorPages();
          services.AddCors(options =&gt;
          {
              options.AddPolicy("cors",
                  builder =&gt;
                  {
                      builder
                          .AllowAnyHeader()
                          .AllowAnyMethod()
                          .WithOrigins("http://localhost:3000");
                  });
          });
  
          services.AddSignalR();
      }
  
      // 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();
          }
          else
          {
              app.UseExceptionHandler("/Error");
              // 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.UseCors("cors");
          app.UseStaticFiles();
          app.UseRouting();
          app.UseAuthorization();
  
          app.UseEndpoints(endpoints =&gt;
          {
              endpoints.MapHub&lt;ChatHub&gt;("/chatHub");
              endpoints.MapRazorPages();
          });
      }
  </code></pre>
  
  <p>On the React side I have implemented as below</p>
  
  <pre><code>import React, { Component } from 'react';
  import * as signalR from '@aspnet/signalr';
  
  class Chat extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        nick: '',
        message: '',
        messages: [],
        hubConnection: null,
      };
    }
  
    componentDidMount = () =&gt; {
      const protocol = new signalR.JsonHubProtocol();
      const transport = signalR.HttpTransportType.WebSockets;
  
      const options = {
        transport,
        logMessageContent: true,
        logger: signalR.LogLevel.Trace,
      };
  
      // create the connection instance
      var hubConnection = new signalR.HubConnectionBuilder()
        .withUrl("http://localhost:44360/chatHub", options)
        .withHubProtocol(protocol)
        .build();
  
      this.setState({ hubConnection }, () =&gt; {
        this.state.hubConnection
          .start()
          .then(() =&gt; console.log('Connection started!'))
          .catch(err =&gt; console.log('Error while establishing connection :('));
  
        this.state.hubConnection.on('SendMessage', (user, message) =&gt; {
          const text = `${user}: ${message}`;
          const messages = this.state.messages.concat([text]);
  
          console.log('ssss');
  
          this.setState({ messages });
        });
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;br /&gt;
  
          &lt;div&gt;
            {this.state.messages.map((message, index) =&gt; (
              &lt;span style={{display: 'block'}} key={index}&gt; {message} &lt;/span&gt;
            ))}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Chat;
  </code></pre>
  
  <p>As you can see I have connected to the exact port where my server application is </p>
  
  <p>I get an entry in the log to say I am connected</p>
  
  <p>However, I never actually get any messages?</p>
  
  <p>My hub in the web application is shown below</p>
  
  <pre><code>"use strict";
  
  var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
  
  //Disable send button until connection is established
  document.getElementById("sendButton").disabled = true;
  
  connection.on("ReceiveMessage", function (user, message) {
      var msg = message.replace(/&amp;/g, "&amp;amp;").replace(/&lt;/g, "&amp;lt;").replace(/&gt;/g, "&amp;gt;");
      var encodedMsg = user + " says " + msg;
      var li = document.createElement("li");
      li.textContent = encodedMsg;
      document.getElementById("messagesList").appendChild(li);
  });
  
  connection.start().then(function () {
      document.getElementById("sendButton").disabled = false;
  }).catch(function (err) {
      return console.error(err.toString());
  });
  
  document.getElementById("sendButton").addEventListener("click", function (event) {
      var user = document.getElementById("userInput").value;
      var message = document.getElementById("messageInput").value;
      connection.invoke("SendMessage", user, message).catch(function (err) {
          return console.error(err.toString());
      });
      event.preventDefault();
  });
  </code></pre>
  
  <p>I thought I had resolved the Cors issues but when I left the web page open for a while I got the error</p>
  
  <pre><code>Access to XMLHttpRequest at 'http://localhost:44360/chatHub/negotiate' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  </code></pre>
  
  <p>Can anyone see what I have done wrong?</p>