title: Why Azure SignalR function returns CORS error on localhost testing
body: <p>I am trying to learn how to use <code>Azure function</code> and <code>SignalR</code> to create a server-less design. for this I have created a following class for <code>Azure function</code> :</p>
  
  <pre><code>    public static class NotifactionR
      {
  
          [FunctionName("negotiate")]
          public static SignalRConnectionInfo Negotiate(
              [HttpTrigger(AuthorizationLevel.Anonymous)]HttpRequest req,
              [SignalRConnectionInfo(HubName = "my-hub")]
              SignalRConnectionInfo connectionInfo)
          {
              // connectionInfo contains an access key token with a name identifier claim set to the authenticated user
              return connectionInfo;
          }
  
          [FunctionName("NotifactionR")]
          public static Task NotifactionR([EventGridTrigger]EventGridEvent eventGridEvent,
              [SignalR(HubName = "my-hub")]IAsyncCollector&lt;SignalRMessage&gt; signalRMessages,
              ILogger log)
          {
              log.LogInformation(eventGridEvent.Data.ToString());
  
              return signalRMessages.AddAsync(
                  new SignalRMessage
                  {
                      // the message will only be sent to these user IDs
                      UserId = "userId1",
                      Target = "OnNewEvent",
                      Arguments = new[] { eventGridEvent.Data }
                  });
          }
      }
  </code></pre>
  
  <p>I have used the following configuration on my <code>local.settings.json</code>to enable local testing:</p>
  
  <pre><code>{
    "IsEncrypted": false,
    "Values": {
      "AzureWebJobsStorage": "UseDevelopmentStorage=true",
      "AzureSignalRConnectionString": "Endpoint=https://myservice.service.signalr.net;AccessKey=myaccess-token;Version=1.0;",
      "FUNCTIONS_WORKER_RUNTIME": "dotnet"
    },
    "Host": {
      "CORS": "http://localhost:7071",
      "CORSCredentials": true
    }
  }
  </code></pre>
  
  <p>and to test this, just created an <code>HTML file</code> which contains a following script:</p>
  
  <pre><code>const connection = new signalR.HubConnectionBuilder()
        .withUrl("http://localhost:7071/api", { headers: { 'Access-Control-Allow-Origin': 'http://localhost:7071'}})
        .configureLogging(signalR.LogLevel.Trace)
        .build();
  
  connection.on('OnNewEvent', ProcessMyEvent);
  connection.onclose(() =&gt; console.log('disconnected'));
  console.log('connecting...');
  
  connection.start()
      .then(() =&gt; data.ready = true)
      .catch(console.error);
  </code></pre>
  
  <p>I am seeing the following error when I open the HTML file on my Chrome (issue is almost same in firefox as well):</p>
  
  <pre><code>connecting...
  Utils.ts:189 [2019-07-27T16:13:01.573Z] Debug: Starting HubConnection.
  Utils.ts:189 [2019-07-27T16:13:01.573Z] Debug: Starting connection with transfer format 'Text'.
  Utils.ts:189 [2019-07-27T16:13:01.575Z] Debug: Sending negotiation request: http://localhost:7071/api/negotiate.
  
  SignalRTest.html:1 Access to XMLHttpRequest at 'http://localhost:7071/api/negotiate' from origin 'null' 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.
  
  Utils.ts:182 [2019-07-27T16:13:02.147Z] Warning: Error from HTTP request. 0: .
  Utils.ts:179 [2019-07-27T16:13:02.148Z] Error: Failed to complete negotiation with the server: Error
  Utils.ts:179 [2019-07-27T16:13:02.148Z] Error: Failed to start the connection: Error
  Error
      at new HttpError (Errors.ts:20)
      at XMLHttpRequest.xhr.onerror (XhrHttpClient.ts:76)
  </code></pre>
  
  <p>does anyone have any ideas as to what I am doing wrong here?</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>Here is my <code>test.html</code> file I am using</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="https://unpkg.com/@aspnet/signalr@1.1.4/dist/browser/signalr.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          window.apiBaseUrl = 'http://localhost:7071';
  
          function initialize() {
              const connection = new signalR.HubConnectionBuilder()
                  .withUrl(window.apiBaseUrl + "/api", { headers: { 'Access-Control-Allow-Origin': 'http://localhost:7071' } })
                  .configureLogging(signalR.LogLevel.Trace)
                  .build();
  
              connection.on('OnNewEvent', ProcessMyEvent);
              connection.onclose(() =&gt; console.log('disconnected'));
              console.log('connecting...');
  
              connection.start({ withCredentials: false })
                  .then(() =&gt; console.log('ready...'))
                  .catch(console.error);
  
          }
          function ProcessMyEvent(vehicle) {
              alert("ProcessMyEvent CALLED");
          }
  
          initialize();
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Update 2:</strong></p>
  
  <p>I have also tried to run this from a command prompt with the following command:</p>
  
  <p><code>c:\Users\Kiran\AppData\Local\AzureFunctionsTools\Releases\2.26.0\cli\func host start --cors * --pause-on-error</code> </p>
  
  <p>still I get the same error</p>