Question

我很高兴发布我的第一个堆栈溢出查询。：D

我最近开始了Node.js课程，我只想指出我还没有做任何硬性工作。

我有一个运行nodemon的本地节点服务器。我开始使用ejs，发现forEach循环由于某种原因正在融化我的网页。

我尝试进行研究并筛选代码，直到问题消失后才逐个删除某些在问题之前不存在的部分，并发现当我在我的ejs文件中的代码中删除forEach循环时，问题消失了。

//this is my .js file located in my ./routes folder

const express = require('express');
const router = express.Router();
const admin_data = require('./admin');

router.get('/', (req, res, next) => {
    const products = admin_data.products;
    res.render('shop', {
        page_title: 'Shop',
        prods: products
    });
});

//nothing too hectic.

//this is my ejs file located in my ./views folder.

<% if (prods.length > 0) { %>
        <div class="grid">
            <% forEach (var products in prods) { %> //if i remove this and it's closing '}' it works fine.
            <article class="card product-item">
                <header class="card__header">
                    <h1 class="product__title">product</h1>
                </header>
                <div class="card__image">
                    <img src="" alt="A Book">
                </div>
                <div class="card__content">
                    <h2 class="product__price">$19.99</h2>
                    <p class="product__description">A very interesting book about so many even more interesting things!
                    </p>
                </div>
                <div class="card__actions">
                    <button class="btn">Add to Cart</button>
                </div>
            </article>
            <% } %>
        </div>
        <% } %>

我希望代码能够呈现页面，但会收到错误：

“ SyntaxError：意外令牌{在C：\ Users \ Ruan中 Buitendag \ Documents \ NodeJS \ Practice Server \ views \ shop.ejs而我的vscode终端中的“编译ejs”和“内容安全策略：页面的设置阻止了内联资源的加载（“ default-src”）”在我的浏览器控制台中。

编辑：PS。我尝试在firefox开发人员版本，普通的firefox和google chrome中运行页面。

Answer 1

我认为问题出在您的循环中。通过以下方式使用forEach：

<% prods.forEach(function(product) { %>
<article class="card product-item">
    <header class="card__header">
       <h1 class="product__title">product</h1>
    </header>
    <div class="card__image">
       <img src="" alt="A Book">
    </div>
    <div class="card__content">
        <h2 class="product__price">$19.99</h2>
        <p class="product__description">A very interesting book about so many even more interesting things!</p>
    </div>
    <div class="card__actions">
        <button class="btn">Add to Cart</button>
    </div>
</article>
<% }) %>

或者，您也可以像这样使用for ... of循环：

<% for (var product of prods) { %>
...

节点ejs forEach导致“内容安全策略”错误

1 个答案: