如何请求字体不通过的WebPack-DEV-服务器提供的Web应用程序

Question

这里是在localhost:5000情况

• Python的瓶是服务HTML
• 的WebPack资产处于localhost:8080/dist

服务

我的HTML从localhost:8080/dist中抽取css和js，没有任何问题。另一方面，我要导入到我的css中的字体非常困难。以下是网络选项卡在chrome开发工具中显示的屏幕截图。

它表明了dist/SourceSansPro*所有请求成为取消。甚至没有一个404被抛出。尽管webpack-dev-server日志记录信息表明一切都正在适当的服务。

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. 

如果我为来自webpack-dev-server的HTML，并将其托管旁边的资产，那么我就没有这个问题。事实上，一切都很好，但是当我从容器中托管我的HTML时，我就会遇到这个问题。

这听起来有点像一个跨源的资源问题，但我不知道如何去谷歌搜索这个问题。

Answer 1

设置Dev Server Headers。

module.exports = { 
    // ... 
    devServer: { 
     headers:{ 
      'Access-Control-Allow-Origin': '*', 
     }, 
    }, 
};