Проблема при попытке axios с шаблоном pug

#node.js #express #axios #pug

#node.js #экспресс #axios #pug

Вопрос:

Я пытаюсь использовать axios с шаблоном pug, но столкнулся с проблемой. вот мой код: 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
    include _header
        
    // CONTENT
    block content
      h1 This is a placeholder heading
      
    // FOOTER
    include _footer
      
    script(src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')
    script(src='/js/login.js')

и в login.js

 const login = async (email, password) => {
  try {
    const res = await axios({
      method: 'POST',
      url: 'http:127.0.0.1:3000/api/v1/login',
      data: {
        email,
        password
      }
    });

    console.log(res);
  } catch (err) {
    console.log(err);
  }
};

document.querySelector('.form').addEventListener('submit', e => {
  e.preventDefault();
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  login(email, password);
});

но каждый раз, когда я пытаюсь отправить форму, я получаю эту ошибку в console.log
»
Отказался загружать скрипт ‘https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js «потому что это нарушает следующую директиву политики безопасности контента: «script-src ‘self'». Обратите внимание, что ‘script-src-elem’ явно не был задан, поэтому ‘script-src’ используется в качестве запасного варианта.
«

Ответ №1:

В данном случае вам необходимо добавить заголовки политики безопасности контента для script-src, чтобы ваш сайт мог загружать скрипты из другого домена cdnjs.cloudflare.com .

Вы можете сделать это либо на своем веб-сервере (если вы его используете), либо в Node.js применение.

 Content-Security-Policy: script-src <source>;

В Node / Express это было бы что-то вроде:

 res.setHeader('Content-Security-Policy', 'script-src cdnjs.cloudflare.com');

Вы также можете использовать такую библиотеку, как: https://www.npmjs.com/package/express-csp-header

1. Действительно спасибо за ваш ответ. Я вроде как новичок в node, например, делаю свой первый узел и столкнулся с этой проблемой. итак, можете ли вы рассказать мне немного подробностей, например, где на сервере я должен использовать «res.setHeader(‘Content-Security-Policy’, ‘script-src cdnjs.cloudflare.com ‘);»? я использовал это в контроллере после вашего ответа, но все еще сталкивался с той же проблемой. затем я установил express-csp-header, но я получил эту ошибку «SyntaxError: идентификатор ‘expressCspHeader’ уже объявлен».

2. о, извините, я дважды скопировал вставленный «const {expressCspHeader, INLINE, NONE, SELF} = require(‘express-csp-header’);» и поэтому получил ошибку «SyntaxError: идентификатор ‘expressCspHeader’ уже объявлен». теперь это исправлено, но я все еще получаю ошибку, как я упоминал вмой вопрос

3. Спасибо. это сработало после использования «app.use(function(req, res, next) { res.setHeader(‘Content-Security-Policy’, «script-src ‘self’ cdnjs.cloudflare.com » ); вернуть следующий(); });»