title: How can I request fonts for a web application not served by webpack-dev-server
body: <p>Here's the situation</p>
  
  <ul>
  <li>Python Flask is serving HTML at <code>localhost:5000</code></li>
  <li>Webpack Assets being served at <code>localhost:8080/dist</code></li>
  </ul>
  
  <p>My HTML pulls <code>css</code> and <code>js</code> from <code>localhost:8080/dist</code> with no problem. Fonts that I'm importing into my css on the other hand are being very difficult. Here's a screenshot of what the network tab shows within the chrome dev tools.</p>
  
  <p><a href="https://i.stack.imgur.com/tGHOm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tGHOm.png" alt="Chrome Network Inspector"></a></p>
  
  <p>It shows that all requests for <code>dist/SourceSansPro*</code> become canceled. Not even a <code>404</code> is being thrown. Despite <code>webpack-dev-server</code> logging information saying that everything is being appropriately served.</p>
  
  <pre><code>Project is running at http://localhost:8080/
  webpack output is served from /dist/
  Hash: 1b12befb328bf596da35
  Version: webpack 3.7.1
  Time: 3629ms
                                Asset     Size  Chunks                    Chunk Names
      SourceSansPro-Semibold.otf.woff   135 kB          [emitted]
         SourceSansPro-ExtraLight.eot   292 kB          [emitted]  [big]
         SourceSansPro-ExtraLight.otf   227 kB          [emitted]
         SourceSansPro-ExtraLight.ttf   292 kB          [emitted]  [big]
         # ... all other assets.
  </code></pre>
  
  <p>If I serve the HTML from <code>webpack-dev-server</code>, and host it alongside the assets, then I do not have this issue. In fact everything works great, but the moment I host my HTML from flask, then I get this issue. </p>
  
  <p>This sounds somewhat like a cross origin resource problem, but I have no idea how to go about googling this issue. </p>