0

我正在尝试添加外部脚本，但在添加时遇到了一些奇怪的错误，不知道为什么这是我实现的后端代码，但它没有解决问题（Nodejs，使用 pug 模板）

后端 app.js 文件

app.use(helmet())
app.use(
    helmet.contentSecurityPolicy({
      useDefaults: true,
      directives: {
        "script-src": ["'self'", "cdn.jsdelivr.net/npm/axios/dist/axios.min.js","js.stripe.com/v3/",'unsafe-inline','unsafe-eval'],
        "style-src": ["'self'","fonts.googleapis.com/css",'unsafe-inline'],
      },
    })
  );

前端 pug 文件

extends base 
include _reviewCard

block append head 
    script(src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js')
    link(href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css'  rel='stylesheet') 
    script(src="https://js.stripe.com/v3/") 
    //- script(src='/js/mapbox.js')

mixin overviewBox(label,text,icon)
    .overview-box__detail
        svg.overview-box__icon
            use(xlink:href=`/img/icons.svg#icon-${icon}`)
        span.overview-box__label= label
        span.overview-box__text= text

block content 
    section.section-header
        .header__hero
            .header__hero-overlay  
            img.header__hero-img(src=`/img/tours/${tour.imageCover}`, alt=`${tour.name}`)

        .heading-box
            h1.heading-primary
                span= `${tour.name} tour`
            .heading-box__group
                .heading-box__detail
                    svg.heading-box__icon
                        use(xlink:href='/img/icons.svg#icon-clock')
                    span.heading-box__text=`${tour.duration} days` 
                .heading-box__detail
                    svg.heading-box__icon
                        use(xlink:href='/img/icons.svg#icon-map-pin')
                    span.heading-box__text= tour.startLocation.description

    section.section-description
        .overview-box
            div
                .overview-box__group
                    h2.heading-secondary.ma-bt-lg Quick facts
                    - const date = tour.startDates[0].toLocaleString('en-us',{month:'long',year: 'numeric'})
                    +overviewBox('Next date',date,'calendar')
                    +overviewBox('Difficulty',tour.difficulty,'trending-up')
                    +overviewBox('Participants',`${tour.maxGroupSize} people`,'user')
                    +overviewBox('Rating',`${tour.ratingsAverage}/5`,'star')


                .overview-box__group
                    h2.heading-secondary.ma-bt-lg Your tour guides

                    each guide in tour.guides
                        .overview-box__detail
                            img.overview-box__img(src=`/img/users/${guide.photo}`, alt=`${guide.name}`)
                            - if(guide.role === 'lead-guide')
                                span.overview-box__label Lead guide
                            - if(guide.role === 'guide')
                                span.overview-box__label Tour guide    
                            span.overview-box__text= guide.name


        .description-box
            h2.heading-secondary.ma-bt-lg= `About ${tour.name} tour`
            - const paragraphs = tour.description.split('\n'); 
            each p in paragraphs
                p.description__text= p

    section.section-pictures
        each img, i in tour.images
            .picture-box
                img.picture-box__img(src=`/img/tours/${img}`, alt=`The Park Camper Tour 1 ${i+1}` class=`picture-box__img--${i+1}`)

    section.section-map
        #map(data-locations=`${JSON.stringify(tour.locations)}`)

    section.section-reviews
        .reviews
            each review in tour.reviews
                +reviewCard(review)

    section.section-cta
        .cta
            .cta__img.cta__img--logo
                img(src='/img/logo-white.png', alt='Natours logo')
            img.cta__img.cta__img--1(src=`/img/tours/${tour.images[1]}`, alt='Tour picture')
            img.cta__img.cta__img--2(src=`/img/tours/${tour.images[2]}`, alt='Tour picture')
            .cta__content
                h2.heading-secondary What are you waiting for?
                p.cta__text= `${tour.duration} days. 1 adventure. Infinite memories. Make it yours today!`
                
                if user
                    button.btn.btn--green.span-all-rows#book-tour(data-tour-id=`${tour.id}`) Book tour now!
                else 
                    a.btn.btn--green.span-all-rows(href='/login') log in to book tour

这是 chrome错误控制台的照片

这是 base.pug 文件代码不认为你会需要它，但我仍然会提供

doctype html
html 
            head 
                block head 
                    meta(charset='UTF-8') 
                    meta(name='viewport' content='width=device-width, initial-scale=1.0')
                    
                    link(rel='stylesheet' href='/css/style.css')
                    link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
                    link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
                    title Natours | #{title}

            body 
                //HEADER
                //- if its a div u can omit tag name just mention className
                include _header

                //- CONTENT
                block content    
                    h1 This is a placeholder heading
                
                //- FOOTER
                //- li:a is short form for `li` after `a` this means `a` is inside `li` tag
                
                include _footer

                //- script(src='/js/mapbox.js')
                //- script(src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js')
                //- script(src='/js/login.js')
                script(src='/js/bundle.js')
4

0 回答 0