如何解决Vue生产环境中的CORS政策问题？

Question

我使用 Vue-CLI 开发了Vue.js应用，它是 dev-server 。在我的项目中，我将主题与Google的字体和MapBox结合使用。在开发服务器中，一切正常。但是，当我构建生产版本并将其部署在nginx上时，在加载字体和地图项时开始出现CORS Policy错误。

  

从原点http://myapp.example.com开始访问https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2'的字体已被CORS策略阻止：飞行前响应中Access-Control-Allow-Headers不允许请求标头字段进行x-compress。

     

从原点“ https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/9/313/157.vector.pbf?sku=101vNL909uOWx&access_token=pk.eyJ1IjoibW9yZmFpciIsImEiOiJjank3YmVxMnYwMW54M2lueXAzcm8xeW52In0.VM_5oG33ipJluIIfMUiN5A”到“ http://myapp.example.com”的访存访问已被CORS策略阻止：对预检请求的响应未通过访问控制检查：它没有HTTP正常状态。 `

Answer 1

这是Chrome 76和FriGate扩展的错误。