title: Error: Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)
body: <p>I am trying to test some api calls with a test site using express and ajax but if I separate the js script into its own file it gives the following error,</p>
  
  <blockquote>
    <p>The resource from “<a href="http://localhost:9000/userProfileFunctions.js" rel="noreferrer">http://localhost:9000/userProfileFunctions.js</a>” was
    blocked due to MIME type (“text/html”) mismatch
    (X-Content-Type-Options: nosniff).</p>
  </blockquote>
  
  <p>It works if I keep everything in the same html file but thats more like a bandaid to the problem. I have even set the express app.use header to "X-Content-Type-Options: nosniff" but it still doesn't work</p>
  
  <p>main.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;script
              src="https://code.jquery.com/jquery-3.4.1.min.js"
              integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
              crossorigin="anonymous"&gt;
      &lt;/script&gt;
  
      &lt;script src="userProfileFunctions.js" &gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form&gt;
          &lt;h4&gt;GET REQUEST USERS PROFILE&lt;/h4&gt;
          UUID: &lt;input id="getUserInput" type="text" name="UUID"&gt;&lt;br&gt;
          &lt;input id="getUserProfile" type="button" value="submit"&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>app.use(function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      next();
  });
  </code></pre>