Lottie Animation不随ejs一起加载，但随标准html一起加载

问题描述

我正在使用以下代码将乐蒂文件嵌入项目中，该文件已添加到DOM中，但我看不到它。我正在使用ejs，但是当我切换到标准html时，可以看到抽奖动画。

<script
  src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"
></script>
<lottie-player
  src="https://assets2.lottiefiles.com/private_files/lf30_kecmeI.json"
  background="transparent"
  speed="0.2"
  style="width: 500px; height: 500px"
  loop
  autoplay
></lottie-player>

当我在ejs上运行此代码时，这就是我得到的，请提出解决方案，谢谢！

我的ejs代码：

<%- include('header'); -%>
<div class="info-header">
  <h1>dCrypt</h1>
  <p class="info">
    dCrypt 2020 promises to be a cryptic hunt in a league of its own. We have
    developed a new platform that combines the classic Capture the Flag formula
    with a fun,engaging and strategic wargame that will test both the
    participants ability to solve these questions,while also using resources in
    a tactical manner.
  </p>
  <button class="mainbtns">Format</button>
  <button class="mainbtns" style="margin-left: 5%">discord</button>
</div>
<script
  src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"
></script>
<lottie-player
  src="https://assets2.lottiefiles.com/private_files/lf30_kecmeI.json"
  background="transparent"
  speed="0.2"
  style="width: 500px; height: 500px"
  loop
  autoplay
></lottie-player>
<%- include('footer'); -%>

我如何呈现以上ejs代码：

app.get("/",contentSecurity,(req,res) => {
  res.render("index.ejs",{ active: "home" });
});

页脚和页眉仅包含文本和CSS

网络标签：

解决方法

因此，这与ejs无关-区别在于您的服务器正在向页面的HTTP get请求添加标头。

打开网站后，在控制台上出现以下错误：

内容安全策略：页面的设置在eval（“ script-src”）处阻止了资源的加载。

这是因为您的页面带有标题：

content-security-policy： script-src'self'https：// *'unsafe-inline'

您可以在MDN page on the header和on script-src上找到更多详细信息。

引发错误的行使用一个eval来创建函数，以使您必须将{% extends "layout.html" %} {% block app_content %} <div> {% from "_formhelpers.html" import render_field %} <form method="post" enctype="multipart/form-data"> <div class = "container"> <div class = "row"> <div class="col-md-5 col-sm-12 align-self-center"> <div class="card"> <div class="card-header"> Register </div> <div class="card-body"> <div> {{ form.hidden_tag()}} {{ render_field(form.fname,class="form-control")}} {{ render_field(form.lname,class="form-control")}} {{ render_field(form.email,class="form-control")}} {{ render_field(form.phoneno,class="form-control")}} {{ render_field(form.password,class="form-control")}} {{ render_field(form.confirm_password,class="form-control")}} {{ render_field(form.submit,class="btn btn-primary")}} </div> <p>Already have an account? <a href="{{ url_for('auth.login')}}">Login</a></p> </div> </div> </div> </div> </div> </form> </div> {% endblock app_content%} 添加到标题中。