Facing problem while trying axios with pug template - node.js

Question

I'm trying to use axios with pug template but facing a problem.
here is my code:
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')
and in 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);
});
but everytime i'm trying to submit the form i'm getting this error in console.log
"
Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
"

Answer 1

You need to add Content Security Policy headers for script-src to allow your site to load scripts from a different domain, in this case cdnjs.cloudflare.com.
You can do this either in your webserver (if you're using one) or in the Node.js application.
Content-Security-Policy: script-src <source>;
In Node/Express it would be something like:
res.setHeader('Content-Security-Policy', 'script-src cdnjs.cloudflare.com');
You can also use a library such as: https://www.npmjs.com/package/express-csp-header