Can't run browserSync in gulp due to Content Security Policy in Chrome browser?

Question

gulp.js

When the task is started, a page opens in the browser with the message "Cannot GET /"



Console


screen: Task code:

const gulp = require('gulp');
const browserSync = require('browser-sync').create();

gulp.task('server', function() {
    browserSync.init({
        server: {
            baseDir: "app/*.html"
        }
    });
});

Help solve the problem! I don't understand why lecturers in video courses don't have these problems..

Answer 1

You have a header somewhere on the server: Either through PHP-shnuyu , or the header is registered in .htaccess or in the Apache / nginx / Denver config tp. Technically, browser extensions/plugins, including malicious ones, can also publish it . Either remove this header entirely, or add a script-src directive to it :
Content-Security-Policy: default-src 'self';

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' appmakedev.xyz linkangood.com;

Also, you have 8 pictures loaded, but they have the wrong src: . When you specify it correctly, you will have to add a directive to the CSP header img-src 'self'(and possibly add the domains from which you upload images).
If you do not remove the header, then you will add to this header all third-party hosts (domains) from which you download scripts and pictures (and CSS styles, and fonts, and much more).
PS: It's strange that you roll the barrel only on Chrome, it should be the same in Firefox. Unless, of course, you have a Content-Security-Policy: default-src 'self';non-browser plug-in.