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

Question

我正在为我的登陆页面设置 gulp，并且当前在使用浏览器同步插件时遇到问题：我浏览了很多关于这个主题的文章，但没有找到解决方案

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>

src/html/head.html:

<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);

终端：

我尝试在标题中添加元标记，例如：

我还添加了谷歌浏览器的扩展来禁用内容安全策略。带有 CSP 错误的消息消失了，但 404 仍然存在。

Answer 1

问题在于一如既往的专注和注意力。

baseDir 而不是 basedir😏

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

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1