Content security policy blocks my rest calls in Vue.js - rest

Question

I just started working with vue.js and try to send a post request to my server, but the request is blocked by CSP.
Error Message:
Refused to connect to 'http://127.0.0.1:5000/login' because it violates the following Content Security Policy directive: "connect-src 'self' ws:".
I have already tried to change my meta-tag but have not come to any solution.
<meta http-equiv=Content-Security-Policy content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; connect-src 'self' ws:;">
Rest call:
export default {
name: "Login",
data() {
return {
loading: false,
login: {
email: "",
password: ""
}
}
},
methods: {
auth(){
fetch("http://127.0.0.1:5000/login",{
body: JSON.stringify(this.login),
method: "POST",
headers:{
"Content-Type": "application/json"
},
credentials: 'same-origin'
})
.then(res =>{
severdata = JSON.parse(res)
console.log(serverdata)
})
console.log(this.login.email)
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 5000);
}
}
};
</script>```

Answer 1

In your server , you need to return the Content-Security-Policy header.
To allow everything (unsafe), use the following (found on this post):
default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';