title: How to provide headers and authenticate at server site using FASTAPI request?
body: <p>I am trying to build a data ploting app, when I request data from the javascript to uvicorn server using fastAPI, browser throws CORS error related to headers. I tried  to  provide headers as given  bellow but not sure how to authonticate them at  server side using  fastAPI.</p>
  <p><strong>JavaScript:</strong></p>
  <pre><code>  var url = 'http://127.0.0.1:8000/data';
  
    $.ajax({
    url: url,
    type:'GET',
    dataType: 'json',
    beforeSend: setHeader,
    // data: data,
    success: function(response) {
      chartCircle.updateSeries([
        response.q
      ],
      console.log(response.q)
      )
  
    }
  });
  
  
  function setHeader(xhr) {
          xhr.setRequestHeader('securityCode', 'Foo');
          xhr.setRequestHeader('passkey', 'Bar');
  }
  </code></pre>
  <p><strong>Python:</strong>  FAST-API</p>
  <pre><code>from typing import Optional
  from fastapi import FastAPI
  from fastapi.middleware.cors import CORSMiddleware
  import random
  
  app = FastAPI()
  
  origins = [*]
  
  @app.get(&quot;/&quot;)
  def read_root():
      return {&quot;Hello&quot;: &quot;World&quot;}
  
  
  @app.get(&quot;/data&quot;)
  def read_item( q: Optional[str] = None):
  
      return { &quot;q&quot;: random.uniform(2.5, 10.0) }
  </code></pre>