어떻게 웹팩-DEV-서버에서 제공하지 않는 웹 응용 프로그램에 대해 글꼴을 요청할 수 있습니다

Question

여기 localhost:5000에서

• 파이썬 플라스크는 HTML 제공되는 상황이다
• 웹팩 자산이 localhost:8080/dist

에서 제공되는

내 HTML css 및 js을 localhost:8080/dist에서 가져오고 아무런 문제가 없습니다. 반면에 내 CSS로 가져 오는 글꼴은 매우 어렵습니다. 다음은 Chrome 개발 도구에서 네트워크 탭에 표시되는 스크린 샷입니다.

그것은 dist/SourceSansPro*에 대한 모든 요청이 취소 될 수 있음을 보여준다. 심지어 404도 던져지지 않습니다. 모든 정보가 적절하게 제공되고 있음을 나타내는 webpack-dev-server 로깅 정보에도 불구하고. 내가 webpack-dev-server에서 HTML 서비스를 제공하고 자산과 함께 그것을 호스팅하는 경우

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. 

, 나는이 문제를 가지고 있지 않습니다. 실제로 모든 것이 잘 작동하지만 플라스크에서 HTML을 호스팅하는 순간이 문제가 발생합니다.

이것은 교차 출처 자원 문제와 다소 비슷하지만이 문제에 대한 검색 방법을 모릅니다.

Answer 1

Dev Server Headers을 설정하십시오.

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