错误404和拒绝执行内联脚本,因为它违反了以下内容安全策略指令,利用浏览器同步gulp插件

b5buobof  于 8个月前  发布在  Gulp
关注(0)|答案(1)|浏览(110)

我正在为我的登录页面设置gulp,并且使用浏览器同步插件时遇到当前问题:errors我已经看过很多关于这个主题的文章,但还没有找到解决方案
src/index.html:

<!DOCTYPE html>
<html lang="en">
  @@include('html/head.html', {
    "title": "My title"
  })
  <body class="page__body">
    @@include('html/header.html', {})
    <main>
      <img src="@img/space.jpeg" alt="image">
    </main>
    @@include('html/footer.html', {})
    <script src="js/app/min.js"></script>
  </body>
</html>

dist/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dellmayer</title>
  <link rel="stylesheet" href="css/style.min.css?_v=20230821191152">
</head>

  <body class="page__body">
    <header class="header">
  <nav class="menu">
    <ul class="menu__list">
      <li class="menu__item">HOME</li>
      <li class="menu__item">HISTORY</li>
      <li class="menu__item">PRODUCT</li>
      <li class="menu__item">SPECIFICATION</li>
      <li class="menu__item">IN THE BOX</li>
      <li class="menu__item">CONTACT</li>
    </ul>
    <picture><source srcset="img/header.webp" type="image/webp"><img src="img/header.webp" alt="header"></picture>
  </nav>
</header>
    <main>
      <picture><source srcset="img/space.webp" type="image/webp"><img src="img/space.jpeg" alt="image"></picture>
    </main>
    <footer></footer>
    <script src="js/app/min.js?_v=20230821191152"></script>
  </body>
</html>

网址:http://www.js.com/

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@@title</title>
  <link rel="stylesheet" href="css/style.min.css">
</head>

gulp/tasks/server.js:

export const server = (done) => {
  app.plugins.browsersync.init({
    server: {
      basedir: `${app.path.build.html}`
    },
    notify: false,
    port: 3000,
  });
}

gulpfile.js:

//main module
import gulp from "gulp";
//import of paths
import { path } from "./gulp/config/path.js";
//import plugins
import { plugins } from "./gulp/config/plugins.js";

//pass a value to the global variable
global.app = {
  path: path,
  gulp: gulp,
  plugins: plugins
}

//import of tasks
import { copy } from "./gulp/tasks/copy.js";
import { reset } from "./gulp/tasks/reset.js";
import { html } from "./gulp/tasks/html.js";
import { server } from "./gulp/tasks/server.js";

//files changes observer
function watcher() {
  gulp.watch(path.watch.files, copy);
  gulp.watch(path.watch.html, html);
}

//main tasks
const mainTasks = gulp.parallel(copy, html);

//development of task execution scripts
const dev = gulp.series(reset, mainTasks, gulp.parallel(watcher, server));

//default script execution
gulp.task('default', dev);

端子:terminal gulp running
我尝试在头中添加Meta标签,如:
此外,我添加了扩展谷歌浏览器禁用内容安全策略. CSP错误消息消失,但404仍然存在。

368yc8dk

368yc8dk1#

问题在于像往常一样集中注意力。
baseDir代替basedir😏

export const server = (done) => {
  app.plugins.browsersync.init({
    server: {
      baseDir: `${app.path.build.html}`
    },
    notify: false,
    port: 3000,
  });
}

相关问题