如何为webpack-dev-server提供的Web应用程序请求字体

Question

这是情况

• Python Flask在localhost:5000
提供HTML服务
• 在localhost:8080/dist
提供的Webpack资产

我的HTML从css提取js和localhost:8080/dist毫无问题。另一方面，我输入我的CSS的字体非常困难。以下是chrome dev工具中网络选项卡显示内容的屏幕截图。

它显示所有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': '*',
        },
    },
};