I saw the following message in the browser console while viewing my SPA:

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-KpHv3zgivMSB4dPnfYfqMt2lBibsYvM36EdoBBAsfbM='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

This error is caused by Browsersync :

enter image description here

The following is known about this error:

  1. It occurs only if the browser restarts in the non-root route, that is, on http://localhost:3001 this error never happens, and, for example, on http://localhost:3001/sign-in and other non-root routes, it will occur the very first automatic page reload.
  2. When this error occurs, nothing is displayed on the page, except you cannot get /sign-in .
  3. This error occurs only in the SPA, where the routing is carried out by means of the HTML History API, and specifically in this case - through vue-router . With the same settings during the development of ordinary websites without using the HTML History API, this error does not occur on any pages.

Why do I use browsersync, not webpack-dev-server?

For versatility. Maintaining multiple gulp / webpack presets for different types of projects is expensive, unification is required. In any case, the transition to the webpack-dev-server impossible, because it reloads the page only when the files included in the webpack-bundle change, and in addition there may be styles, templates, etc. independent of the webpack bundle. as "add everything to the webpack bundle" deprive of flexibility, which is also not bad from the point of view of system design.

    1 answer 1

    I do not know if this will be the best solution, but for your needs I think it will do. You can install a browser extension to avoid CSP errors ( Read more here )

    https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden

    • Thank you for your reply! I understood about the solution, but could you make a small comment about the reasons for this error? - Bokov Gleb