title: Fetch in JavaScript for FastApi in localhost
body: <p>How can you use my Api made with FastAPI, from my localhost, from an external html, for example, it is my simple implementation of test:</p>
  <p>main.py:</p>
  <pre><code>from fastapi import FastAPI
  
  app = FastAPI()
  
  @app.get(&quot;/&quot;)
  async def main():
      return {&quot;message&quot;: &quot;Hello World&quot;}
  </code></pre>
  <p>index.html:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Item Details&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script&gt;
          //var url = 'http://localhost:8000';
          fetch('http://127.0.0.1:8000/')
          .then(res =&gt; res.json())
          .then(data =&gt; {console.log(data)})
      &lt;/script&gt;
      &lt;h1&gt;&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>but the return navigator(Safari) is:</p>
  <blockquote>
  <p>[Error] Origin null is not allowed by Access-Control-Allow-Origin.
  [Error] Fetch API cannot load <a href="http://127.0.0.1:8000/" rel="nofollow noreferrer">http://127.0.0.1:8000/</a> due to access
  control checks. [Error] Failed to load resource: Origin null is not
  allowed by Access-Control-Allow-Origin. (127.0.0.1, line 0) [Error]
  Unhandled Promise Rejection: TypeError: Origin null is not allowed by
  Access-Control-Allow-Origin.  (anonymous function)    promiseReactionJob</p>
  </blockquote>